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代码也进行压缩编译（配置规则）
            // https://github.com/kangax/html-minifier
            minify: {
                collapseWhitespace: true, // 去掉标签与标签之间的空格
                removeComments: true, // 去掉注释
                removeAttributeQuotes: true, // 去掉标签属性的双引号，但不会报错
                removeEmptyAttributes: true // 去掉空的属性
            }
        })
    ]
}

html模板中可以自己单独导入一些css/js/图片等资源文件
    1. 自己导入的文件不会受webpack编译的影响（不会和其他模块的文件编译在一起），所以有时候我们会单独导入
    一些公共的资源文件。
    2. 有些资源类库不支持CommonJS规范，也不支持ES6Module规范，这样的资源文件只能在模板中手动导入，因为
    webpack无法处理它。

2. clean-webpack-plugin

npm install clean-webpack-plugin --save-dev

每次打包后，将老文件清除掉。

const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.export = {
	plugins: [
		new CleanWebpackPlugin();
	]
}

3. webpack-dev-server

相关配置项：https://webpack.js.org/configuration/dev-server/
npm install webpack-dev-server --save-dev

帮助我们自动打开浏览器，监听代码的改变，自动刷新，自动编译（编译的内容放到计算机内存中），

module.exports = {
    mode: 'development',
    entry: './src/main.js',
    output: {
        filename: 'bundle.min.js',
        path: path.resolve(__dirname,'build')
    },
    // 配置dev-server 编译后的结果放在计算机内存中，并不会像之前的webpack命令一样，把编译后的
    // 东西放到build下，dev-server仅仅是在开发模式下，随时编译并且预览的，项目要部署的时候，还是
    // 需要基于webpack编译打包。
    devServer: {
        // web服务的端口号
        port: '3000',
        // 开启gzip压缩
        compress: true,
        // 指定资源访问的路径
        contentBase: path.resolve(__dirname,'build'),
        // 自动打开浏览器
        open: true,
        // 开启热更新
        hot: true,
        // Proxy跨域代理
        // proxy: {
        //     '/': 'http://127.0.0.1:8888' // 所有带 '/' 的请求，都由该路径代理。
        // }
    },
}

要开启 一个服务，我们要在 package 中添加启动方式：scripts:{"serve": "webpack-dev-server"}，然后 npm run serve

"scripts": {
	"serve": "webpack-dev-serve", // 开发：编译到计算机内存
	"build": "webpack" // 部署：基于这个命令生成部署文件
 }

4. 多页面，多入口

单页面 对应的是 单入口 => 单页面应用开发；但遇到多个页面的时候，如何配置？

举例：入口文件：2个；模板html：2个

/*
	1. 首先 entry 就得是一个对象了，存 key:value。
	2. output 导出的文件名不能是固定的了，得用[name], name的值取决于 entry中的 key。
	3. 页面模板：用循环处理。
*/

// 配置多页面模板
let htmlPlugins =  ['index','login'].map( item => {
    return new HtmlWebpackPlugin({
        template: `./public/${item}.html`,
        filename: `${item}.html`,
        chunks: ['jquery',item], // 当前页面的依赖项 打包的时候只会把 item 导入到 目标文件中（按照数组中的顺序引入）。
        minify: {
            collapseWhitespace: true,
            removeComments: true,
            removeAttributeQuotes: true,
            removeEmptyAttributes: true
        }
    })
} );

module.exports = {
	entry: {
        index: './src/main.js',
        login: './src/login.js',
        /*
            如果不想把jq合并在其他的js中，想独立打包出来（多个页面公共的部分我们可以独立打包出来）。
            注意：chunk中的名字 是这里给定的 名字。

            若不想将jq独立出来，就用CommonJS规范每个文件单独导入。
        */
        jquery: 'jquery'
    },
    output: {
        filename: '[name].[hash].min.js',
        path: path.resolve(__dirname,'build')
    },
    // 在 webpack 中使用插件
    plugins: [
        // 配置指定的HTML页面模板（后期在编译的时候会把编译好的资源文件自动导入到我们的页面模板中）
        ...htmlPlugins
        ,
        // 每一次打包都把之前打包的清空。
        new CleanWebpackPlugin()
    ]
}

配置完成，可 npm run build 查看生成的文件。
也可以通过 npm run serve 以服务的方式查看，默认打开的是 index.html(http://localhost:3000)，路径后加 login.html 即可打开login页面（http://localhost:3000/login.html）