解析webpack插件html-webpack-plugin

zx0423 2020-05-22 原文

解析webpack插件html-webpack-plugin

前言：

　　本文将分为基本概念、基础使用、模块的运用（问题解决）来进行阐述。

一、基本概念

　　我们为什么会需要HtmlWebpackPlugin插件？

　　在真实发布项目时，发布的是dist文件夹中的内容，但是dist文件夹中如果没有index.html文件，那么打包的js等文件也就没有意义了。所以，我们需要将index.html文件打包到dist文件夹中，这个时候就需要使用HtmlWebpackPlugin插件。

　　那么，HtmlWebpackPlugin插件到低可以为我们做什么呢？

　　一、自动生成一个index.html文件(可以指定模板来生成)

　　二、将打包的js文件，自动通过script标签插入到body中

二、基础使用

　　1、安装插件 npm install html-webpack-plugin –save-dev （因为只在生产环境下用到，所以加上-dev）

　　2、使用插件，修改webpack.config.js文件中plugins部分的内容如下：

module.exports = {
    plugins: [
        new htmlWebpackPlugin({
            title: "this is title", //用于生成的HTML文档的标题
            filename: "index.html", //生成的模板文件的名字，默认index.html
            template: "index.html", //模板来源文件
            inject: true | 'head' | 'body' | false ,注入所有的资源到特定的 template 或者 templateContent 中，如果设置为 true 或者 body，所有的 javascript 资源将被放置到 body 元素的底部，'head' 将放置到 head 元素中
            favicon: "", //指定页面图标
            minify: {} | false, //传递html-minifier选项给minify输出
        　　/*
            {
                caseSensitive: false, ////是否大小写敏感
                collapseBooleanAttributes: true, //是否简写boolean格式的属性如：disabled="disabled" 简写为disabled 
                collapseWhitespace: true //是否去除空格
            },
            */
            hash: true, //是否生成hash添加在引入文件地址的末尾，类似于常用的时间戳，这个可以避免缓存带来的麻烦。如果为 true, 将添加一个唯一的 webpack 编译 hash 到所有包含的脚本和 CSS 文件，对于解除 cache 很有用
            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
        })
    ]
};