webpack html-webpack-plugin插件詳解

1,項目安裝 html-webpack-plugin 插件

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

2,引用 html-webpack-plugin 插件

var htmlWebpackPlugin = require('html-webpack-plugin');

3,調用 html-webpack-plugin 插件

module.exports = {
    plugins: [
        new htmlWebpackPlugin({
            title: "this is title", //用於生成的HTML文檔的標題。
            filename: "index.html", // 生成的模板文件的名字 默認index.html
            template: "index.html", //模板來源文件
            inject: false, //注入位置'head','body',true,false
            favicon: "", //指定頁面圖標
            minify: {
                caseSensitive: false, ////是否大小寫敏感
                collapseBooleanAttributes: true, //是否簡寫boolean格式的屬性如：disabled="disabled" 簡寫為disabled 
                collapseWhitespace: true //是否去除空格
            },
            hash: true, //是否生成hash添加在引入文件地址的末尾，類似於我們常用的時間戳，這個可以避免緩存帶來的麻煩
            cache: true, //是否需要緩存，如果填寫true，則文件只有在改變時才會重新生成
            showErrors: true, //是否將錯誤信息寫在頁面里，默認true，出現錯誤信息則會包裹在一個pre標簽內添加到頁面上
            chunks: ['a', 'b'], //引入的a,b模塊，這里指定的是entry中設置多個js時，在這里指定引入的js，如果不設置則默認全部引入,數組形式傳入
            chunksSortMode: "auto", //引入模塊的排序方式
            excludeChunks: ['a', 'b'], //排除的模塊,引入的除a,b模塊以外的模塊，與chunks相反
            xhtml: false //生成的模板文檔中標簽是否自動關閉，針對xhtml的語法，會要求標簽都關閉，默認false
        })
    ]
};