Webpack4.0 基础配置2

问题：

1. 每一次代码更改，重新编译后，都需要手动的去更改HTML也页面导入的JS信息，插件：html-webpack-plugin 帮我们处理的就是对于HTML的编译和导入文件的自动处理。
2. 每一次打包的时候都把之前打包的内容清空掉，也就是build下只保留最新打包的文件。
3. 是否存在一个插件，可以帮我们创建一个web服务（不再使用 live-server了），服务可以做以下的事：
   -> 自动监听代码的改变，如果代码改变自动编译。
   -> 自动帮我们打开浏览器渲染页面。
   -> 重新编译后自动刷新浏览器，看到最新的效果。
   【除非配置项更改了，需要自己重新执行，否则直接都基于这个插件完成自动化处理】webpack-dev-server

1. html-webpack-plugin

安装：npm i html-webpack-plugin --save-dev
clean-webpack-plugin ; webpack-dev-server

在根目录下创建public文件夹，将模板html文件放入其中，我们基于这个插件会把合并压缩后的资源文件自动导入到这个模板中。

module.exports = {
   
    mode: 'development',
    entry: './src/main.js',
    output: {
   
        filename: 'bundle.min.js',
        path: path.resolve(__dirname,'build')
    },
    plugins: [
        // 配置指定的HTML页面模板（后期在编译的时候会把编译好的资源文件自动导入到我们的页面模板中）
        new HtmlWebpackPlugin({
   
            // 模板的路径
            template: './public/index.html',
            // 编译后生成的文件名
            filename: 'index.html',
            // 是否把编译的资源文件导入到页面中，设置 hash 值（清除
            // 强缓存，和 output 设置hash值是一样的 ，两个保留一个即可）
            hash: true,
            // 把模板中的HTML代码也进行压缩编译（配置规则）