到目前為止，有關Webpack最基礎的內容差不多已經講完了，其中包括Webpack運行的基本流程、CSS的打包和圖片的打包，也就是說，當你掌握這幾節之后，基本上就能像以前不用Webpack時一樣愉快地寫代碼了。

當然，我們其實還有很多需要優化的地方，就比如本文所要講到的，如何將HTML進行打包？

在之前的實例中，Webpack雖然能夠正常地將各種頁面所需要的資源從src目錄打包至dist目錄，但是我們在最后必須在dist目錄中手動去創建HTML頁面，并引入這些打包后的資源。

事實上，Webpack能夠自動的幫助我們完成這件事，只需要使用html-webpack-plugin插件即可。

1. 安裝html-webpack-plugin插件

與安裝loader一樣，命令行輸入以下命令回車即可。

npm i -D html-webpack-plugin

2. webpack.config.js中添加相關配置

const htmlWebpackPlugin = require('html-webpack-plugin'); // 引入html-webpack-plugin插件

module.exports = {

entry: './src/scripts/index.js', // 打包入口

output: {

path: __dirname + '/dist', // 輸出路徑

filename: 'scripts/index.js' // 輸出文件名

},

module: {

rules: [ // 其中包含各種loader的使用規則

{

test: /\.css$/, // 正則表達式，表示打包.css后綴的文件

use: ['style-loader','css-loader'] // 針對css文件使用的loader，注意有先后順序，數組項越靠后越先執行

},

{ // 圖片打包

test: /\.(png|jpg|gif|svg)$/,

loader: 'url-loader',

options: {

name: './images/[name].[ext]',

limit: 8192

}

}

]

},

plugins: [ // 打包需要的各種插件

new htmlWebpackPlugin({ // 打包HTML

template: './src/index.html' // HTML模板路徑

})

],

watch: true // 監聽文件改動并自動打包

};

3. 添加HTML模板文件

HTML模板文件如下：

Hello Webpack

是的，除了HTML本身，其他資源如CSS、圖片等均無需手動添加，在打包結束后，所有資源均會自動添加至HTML文件相應位置并進入dist目錄。

4. 打包結束

打包后的index.html文件如下：

Hello Webpack

總結

以上是生活随笔為你收集整理的html5页面文件打包,Webpack入门(四)——HTML打包的全部內容，希望文章能夠幫你解決所遇到的問題。

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