Webpack輕鬆入門（四）——HTML打包

到目前為止，有關Webpack最基礎的內容差不多已經講完了，其中包括、和，也就是說，當你掌握這幾節之後，基本上就能像以前不用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模板檔案如下：

html>
    
    

是的，除了HTML本身，其他資源如CSS、圖片等均無需手動新增，在打包結束後，所有資源均會自動新增至HTML檔案相應位置並進入dist目錄。

4. 打包結束

打包後的index.html檔案如下：

html>
    
    

本文重點總結

打包HTML，使用 html-webpack-plugin 外掛即可

作者：前端王睿
連結：