打包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", //入口文件,從項目根目錄指定output: { //輸出路徑和文件名，使用path模塊resolve方法將輸出路徑解析為絕對路徑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',//默認webpack-dev-server會為根文件夾提供本地服務器，如果想為另外一個目錄下的文件提供本地服務器，應該在這里設置其所在目錄（本例設置到"build"目錄）historyApiFallback: true,//在開發單頁應用時非常有用，它依賴于HTML5 history API，如果設置為true，所有的跳轉將指向index.htmlinline: true,//設置為true，當源文件改變時會自動刷新頁面port: 8080//設置默認監聽端口，如果省略，默認為"8080"},plugins: [new HtmlWebpackPlugin({title: 'Custom template',template: './src/index.html', //指定要打包的html路徑和文件名filename:'../index.html' ,//指定輸出路徑和文件名 favicon:'./src/img/apple-touch-icon.png',//給生成的 html 文件生成一個標簽<link rel="shortcut icon" href="apple-touch-icon.png">hash: true,//給生成的 js 文件一個獨特的 hash 值 <script type=text/javascript src=bundle.js?22b9692e22e7be37b57e></script>showErrors:true,//webpack 編譯出現錯誤minify:{//對 html 文件進行壓縮，minify 的屬性值是一個壓縮選項或者 false 。默認值為false, 不對生成的 html 文件進行壓縮removeComments:true, // 去除注釋collapseWhitespace: true //是否去除空格}})] }

index.html

在html的title處填寫<title><%= htmlWebpackPlugin.options.title %></title>打包后會自動附上new HtmlWebpackPlugin方法里面的title的值

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。