观察模式&DevServer|Webpack小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。开发环境实际工

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

开发环境

实际工作中，开发环境是必需的

前文提到的 SourceMap 方便调试错误，开发构建时推荐eval-source-map

想象下工作场景：编写源代码，接着Webpack打包编译，执行build命令，然后浏览器运行，最终查看效果

开发环境不同于生产环境，若按照这样的流程进行，调试一个功能就需要花费很多时间，工作效率低

在每次编译代码时，手动运行 npm run build 会显得很麻烦。

而 webpack 已经解决这个问题：支持代码发生变化后自动编译代码，见下:

观察模式（watch mode）

启用 Watch 模式。这意味着在初始构建之后，webpack 将继续监听任何已解析文件的更改

开启观察模式，可理解为：Webpack初始构建后，监听文件变化，当文件修改后，会自动重新打包编译

划重点：自动，避免了手动执行命令编译的操作，工作效果提高了不少

how

修改package.json

"scripts": {
     "watch": "webpack --watch",  // or webpack --watch --config xxx.js
     "build": "webpack"
 },

安装clean-webpack-plugin插件，对应 webpack 配置:

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

entry: {
   main: './src/xxx',
},
output: {
    path: path.join(__dirname, '../xxx/dist'),
    publicPath: '',
    filename: '[name].js',
},

plugins: [
    new CleanWebpackPlugin({ cleanStaleWebpackAssets: false })
]