打包html使用插件：html-webpack-plugin

安裝

npm i --save-dev html-webpack-plugin

配置文件

const path = require("path"); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = {entry: __dirname+"/src/index.js", //入口文件,從項(xiàng)目根目錄指定output: { //輸出路徑和文件名，使用path模塊resolve方法將輸出路徑解析為絕對(duì)路徑publicPath: __dirname + "/build", // js引用路徑或者CDN地址path: path.resolve(__dirname, "build"), //打包后的js文件存放的地方 將js文件打包到build的目錄filename: "main.js" //打包后輸出的js的文件名 將入口文件index.js打包到build/main.js},devServer: {contentBase: './build',//默認(rèn)webpack-dev-server會(huì)為根文件夾提供本地服務(wù)器，如果想為另外一個(gè)目錄下的文件提供本地服務(wù)器，應(yīng)該在這里設(shè)置其所在目錄（本例設(shè)置到"build"目錄）historyApiFallback: true,//在開(kāi)發(fā)單頁(yè)應(yīng)用時(shí)非常有用，它依賴(lài)于HTML5 history API，如果設(shè)置為true，所有的跳轉(zhuǎn)將指向index.htmlinline: true,//設(shè)置為true，當(dāng)源文件改變時(shí)會(huì)自動(dòng)刷新頁(yè)面port: 8080//設(shè)置默認(rèn)監(jiān)聽(tīng)端口，如果省略，默認(rèn)為"8080"},plugins: [new HtmlWebpackPlugin({title: 'Custom template',template: './src/index.html', //指定要打包的html路徑和文件名filename:'../index.html' ,//指定輸出路徑和文件名 favicon:'./src/img/apple-touch-icon.png',//給生成的 html 文件生成一個(gè)標(biāo)簽<link rel="shortcut icon" href="apple-touch-icon.png">hash: true,//給生成的 js 文件一個(gè)獨(dú)特的 hash 值 <script type=text/javascript src=bundle.js?22b9692e22e7be37b57e></script>showErrors:true,//webpack 編譯出現(xiàn)錯(cuò)誤minify:{//對(duì) html 文件進(jìn)行壓縮，minify 的屬性值是一個(gè)壓縮選項(xiàng)或者 false 。默認(rèn)值為false, 不對(duì)生成的 html 文件進(jìn)行壓縮removeComments:true, // 去除注釋collapseWhitespace: true //是否去除空格}})] }

index.html

在html的title處填寫(xiě)<title><%= htmlWebpackPlugin.options.title %></title>打包后會(huì)自動(dòng)附上new HtmlWebpackPlugin方法里面的title的值

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專(zhuān)家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的webpack4打包html,html-webpack-plugin详解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。