webpack中使用html-webpack-plugin生成HTML文件並主動插入css和js引入標簽

• html-webpack-plugin
• clean-webpack-plugin

 一、html-webpack-plugin

由於打包時生成的css樣式文件和js腳本文件會采用hash值作為文件命名的一部分，每一次調試打包結果都需要手動修改名稱，這種做法就違背了webpack的自動化打包的初衷，而且還有需求就是要對html文件進行優化壓縮，也不能直接在源文件上進行操作，還有清除注釋等一系列操作。

npm install html-webpack-plugin --save-dev

更詳細的教程文檔可以參考npm插件文檔：https://www.npmjs.com/package/html-webpack-plugin

var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    plugins: [
        //生成html文件
        new HtmlWebpackPlugin({
            filename:'index.html',//生成的文件名
            template:'./index.html',//指定打包壓縮的文件
            minify:{
                removeComments:true,//清除注釋
                collapseWhitespace:true//清理空格
            }
        })
} 

當然也可以同時處理多個html文件（通過chunks屬性）：

plugins: [
  new HtmlWebpackPlugin({
    chunks: ['app']
  })
]

 二、clean-webpack-plugin

clean-webpack-plugin插件是用來清理構建文件夾，將上一次構建的文件全部清除，這個插件很簡單，只需要plugins中引入就可以，沒有什么多余的配置，但是需要注意的是在創建變量的時候需要使用大括號將變量名包裹起來，不然有時會出現報錯情況，原因尚不明確：

const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = {
    plugins: [
        new CleanWebpackPlugin()//清理構建文件夾
    ]
}     

 

這邊博客是基於上一篇博客的基礎上測試的，所有測試代碼與上一篇博客一致，只有配置文件增加了一些新的功能，下面貼上全部配置文件代碼：

var path = require("path");
const glob = require('glob');
const PurifyCSSPlugin = require('purifycss-webpack');
var MiniCssExtractPlugin = require("mini-css-extract-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = {
    entry: {
        index: './src/index.js',
    },
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "[name]-[hash:5].js",
        // publicPath:'/dist'
    },
    module: {
        rules: [
            {
                test: /\.less$/,
                use: [
                    // {loader:'style-loader'},
                    { loader: MiniCssExtractPlugin.loader },
                    { loader: 'css-loader' },
                    {
                        loader: 'postcss-loader',
                        options: {
                            ident: 'postcss',
                            plugins: [
                                // require('autoprefixer')(),//添加前綴
                                require('postcss-cssnext')(),//添加前綴 轉換css未來語法
                                require('cssnano')({
                                    preset: 'default'
                                }), 
                            ]
                        }
                    },
                    { loader: 'less-loader' }],
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // both options are optional
            filename: "[name]-[hash:5].css",
            // chunkFilename: "[id].css"
        }),
        new HtmlWebpackPlugin({
            filename:'index.html',//生成的文件名
            template:'./index.html',//打包壓縮的文件
            minify:{
                removeComments:true,//清除注釋
                collapseWhitespace:true//清理空格
            }
        }),
        new CleanWebpackPlugin()
        // new PurifyCSSPlugin({
        //     paths:glob.sync(path.join(__dirname,'../index.html'))
        // })
    ]
}