webpack4从0开始构建前端单页项目(3)用webpack-dev-server搭建热加载开发环境

模块热替换(HMR - hot module replacement)功能会在应用程序运行过程中，替换、添加或删除 模块，而无需重新加载整个页面。主要是通过以下几种方式，来显著加快开发速度：

1.保留在完全重新加载页面期间丢失的应用程序状态。
2.只更新变更内容，以节省宝贵的开发时间。
3.在源代码中 CSS/JS 产生修改时，会立刻在浏览器中进行更新，这几乎相当于在浏览器 devtools 直接更改样式。
4.不用刷新浏览器，不输出文件，而是将文件放在内存中。

使用HotModuleReplacementPlugin插件

    cnpm i webpack-dev-server -D

项目结构

    project
    |   .editorconfig       # 配置格式化插件
    |   package.json        # 项目需要的依赖
    |   webpack.config.js   # webpack配置文件
    |   
    +---public
    |       index.html      # 用于打包生成 .html 文件的模板
    |       
    ---src
            main.js         # webpack的入口文件

依赖的模块(package.json)

    "devDependencies": {
        "html-webpack-plugin": "^4.5.0",
        "webpack": "^4.44.2",
        "webpack-cli": "^3.3.12",
        "webpack-dev-server": "^3.11.0"
    }

webpack配置文件

// webpack.config.js
    const webpack = require("webpack");
    const path = require("path");
    const htmlWebpackPlugin = require("html-webpack-plugin");

    module.exports = {
        entry: "./src/main.js",
        mode: "development",
        output: {
            path: path.join(__dirname, "dist"),
            filename: "app.[hash:16].js",
        },
        plugins: [
            new htmlWebpackPlugin({
                filename: "index.html",
                template: "./public/index.html",
                minify: {
                    collapseWhitespace: false,
                },
                inject: true,
            }),
            new webpack.HotModuleReplacementPlugin(), // 安装了webpack-dev-server依赖，这个可以不用配置
        ],
        devServer: {
            contentBase: path.join(__dirname, "dist"), // 服务器加载文件的目录 告诉开发服务器(dev server)，在哪里查找文件
            compress: true,
            port: 9000, // 配置端口
            hot: true, //启用热加载，改变src下的源码后，浏览器自动刷新
        },
    };

配置运行脚本(package.json)

    "scripts": {
        "test": "echo "Error: no test specified" && exit 1",
        "build": "webpack --webpack.config.js",
        "dev": "webpack-dev-server --open",
        "serve": "webpack-dev-server",
        "start": "webpack-dev-server"
    },

运行 npm run dev 或者 npm run serve 或者 npm start 都能启动开发环境的dev服务器、 --open表示打开默认浏览器

模块热替换1 参考: https://webpack.docschina.org/concepts/hot-module-replacement/

模块热替换2 参考: https://webpack.docschina.org/guides/hot-module-replacement/

webpack-dev-server 参考: https://www.webpackjs.com/guides/development/#%E4%BD%BF%E7%94%A8-webpack-dev-server