webpack(3)配置打包html资源

1.上面讲了打包js文件，这些打包出来的js文件需要引入到html文件中，如果一个个都需要我们手动在html中加入script标签来引用就麻烦了。

这里用webpack打包html的好处有：

（1）可以自动将打包后的js文件引入html

（2）html打包后依然会生成在build文件夹下和打包后的js文件放在一起，这样上线的时候我们只需要将打包生成的文件夹一起拷贝到上线环境就可以了

（3）会帮我们压缩html文件

2.打包html需要使用插件，这里使用的是：html-webpack-plugin

3.首先安装html-webpack-plugin：根目录下执行npm install html-webpack-plugin -D，同意作为打包工具我们只在开发阶段使用所以加上-D

这里安装的时候注意一下安装的版本并不是越新越好，我之前就是安装了最新的5.3.0结果引入这个插件到配置文件中使用webpack打包的时候就报错：Error: Cannot find module 'loader-utils'。后来我将版本降到了5.1.0就好了。所以需要谨慎选择。

4.在webpack.config.js中配置使用html-webpack-plugin：

const{resolve}=require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin')//引入插件

module.exports={

    entry:{

        test0:'./src/index.js',

        test1:'./src/main.js'},

    output:{

        path:resolve(__dirname,'build'),

        filename:'[name].js'

    },

    mode:'development',

    module:{

        rules:[]

    },

    plugins:[

        new HtmlWebpackPlugin({//配置插件

            template:'./src/index.html',//需要打包的html文件目录

            filename:'index.html',//打包后生成的html文件的名称

            minify:{

                collapseWhitespace:true,//去掉空格压缩代码。默认是false

                removeComments:true//去掉注释。默认是false

            }

        })

    ]

}

执行npx webpack打包后会在build文件夹中生成index.html，然后index.html中自动引入了打包生成的test0.js和test1.js