html-webpack-plugin 和clean-webpack-plugin以及 webpack-dev-server

1、简单介绍

html-webpack-plugin：

作用：1）根据一个html模板在内存中生成一个相同的html
      2）把内存中的打包好的js插入到内存中Html最后面

clean-webpack-plugin：

作用：把之前老的打包好的模块删除掉，仅仅留下最新打包的。

webpack-dev-server:

作用：开发模式下，直接在内存中打包，速度快，使用epxress服务器托管起来，直接访问内存中的项目。
      自动监听代码是否改变了，如果代码改变了，自动在内存中打包。
      帮我们自己打开浏览器
      ...
    
vue中代理跨域也是基于这个webpack-dev-server。

运行webpack-dev-server 就是在内存中打包。

2、安装

 可以通过：npm i html-webpack-plugin clean-webpack-plugin webpack-dev-server -D 对上面三个模块进行安装。

3、原理

html-webpack-plugin:
最终它要在内存中打包好一个js模块，这个模块可以插件到html中，使用html-webpack-plugin，
就可以根据一个模板在内存中生成一个html文件，我们就把内存中的js插件到内存中的html文件中。
我们只需要指定一个html模板就OK了，html-webpack-plugin就可以根据这个模板在内存中生成一个html文件。
webpack-dev-server就可以帮我们在内存中打包好一个js文件，html-webpack-plugin又可以把内存中的js插入到
内存中的Html中。

webpack-dev-server:
之前是通过webpack命令 这个命令是打包到硬盘上的
现在使用webpack-dev-server命令，它可以把包打包到内存中
javascript "scripts": { "serve": "webpack-dev-server", // npm run serve 是打包到内存中 "build": "webpack" // npm run build 是打包到硬盘上 },

4、配置

引入模块以及配置如下：

const path = require("path")
const htmlWebpackPlugin = require("html-webpack-plugin")
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
module.exports = {
    mode: "development",
    // mode: "production",
    //设置要打包的的入口
    entry: "./src/main.js",
    //设置打包后的出口
    output: {
        //配置文件名
        filename: "bundle.[hash].js",
        //配置打包后的文件输出到什么位置
        path: path.resolve(__dirname, "dist")
    },
    //配置webpack-dev-server
    devServer: {
        port: "8080", //托管内存中的包的端口
        compress: true, //开启gzip压缩
        open: true, //打开浏览器
        contentBase: path.resolve(__dirname, "dist"),
        hot: true,
    },
    plugins: [
        new htmlWebpackPlugin({
            //指定模板的位置
            template: "./public/index.html",
            //打包生成的文件名
            filename: "index.html",
            //是否把打包好的资源插入到页面中，是否设置hash值
            hash: true,
            minify: {
                removeComments: true, //在内存中html中就没有注释
                collapseWhitespace: true, //清理html中的空格、换行符
                minifyCSS: true, //压缩内部样式
                removeEmptyElements: true, //清楚掉空标签
            }
        }),
        //每一次打包，将上一次打包生成的文件删除
        new CleanWebpackPlugin()
    ]
}