005 webpack基础 - webpack处理html资源

   [A] 简介

　　1. 当前，我们通过手动创建一个htm文件，然后将打包后的js文件添加到这个html文件中

　　2. 但是，当打包后的文件名更改后，打包的文件有若干个后，我们需要手动更改html文件中的内容，这样做比较繁琐

　　3. 因此，可以使用 HtmlWabpackPlugin 插件来简化上述的操作，使得html自动加载打包后的内容

 

[B] 示例

　　　　安装插件：

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

        webpack中配置：
            const HtmlWebpackPlugin = require('html-webpack-plugin');
            module.exports = {
                plugins: [
                    new HtmlWebpackPlugin({
                        // 设置html模板，以当前html文件为模板, 在dist根目录下创建html文件
                        // 新创建的html文件：1. 解构和模板文件一致，2. 自动引入打包后文件
                        template: path.resolve(__dirname, 'src')
                    })
                ],
            }

　　　　这里，如没有配置模板信息，则该插件会自动创建一个index.html文件，并导入打包后的文件

 

[C] 压缩html代码

　　默认生产模式已经开启了：html 压缩和 js 压缩

　　不需要额外进行配置