devServer: {

        // contentBase: "/dist", // webpack5 已经废弃，改static

        static: {

            directory: path.join(__dirname, "dist")

        },

        open: true

    },

问题：

1. 实时监听代码，当监听到代码变化就重新打包；

2. 缺少前端的服务(现有 index.html 是通过本地打开的方式启动)；

解决方案：安装及配置webpack-dev-server

• 安装命令：

npm i -D webpack-dev-server

• 在 webpack.config.js 中配置：

module.export = {
    ...
    devServer: {
        contentBase: "/dist,
        open: true
    },
    ...
}

• 重新在 package.json 中配置脚本

"scripts":{
    ...
    "start": "webpack-dev-server"
}

• 运行命令

npm start

1. 本地开发环境

$ cnpm install -D webpack-dev-server

2. 热更新、自动打开浏览器

devServer:{
    contentBase: "/dist",
    open: true
}

3. package.json

"scripts":{
    "start" : "webpack-dev-server"
}

4. 启动

$ npm start