介绍
webpack-watch-config 是一个 npm 包，它提供了一个简单的方式来将 webpack 的配置文件和运行参数分离。这个包能够帮助前端开发者提高开发效率，因为它能够让你在修改 webpack 配置文件后，自动重启 webpack。
安装
使用 npm 安装 webpack-watch-config：
npm install webpack-watch-config --save-dev
用法
首先，我们需要将我们的 webpack 配置文件拆分成两个文件：一个是运行参数文件，一个是配置文件。例如，我们的项目目录结构如下：
my-app/ ├── webpack/ │ ├── webpack.config.js │ └── webpack.run.js └── package.json
在 webpack.run.js 文件中，我们只需要设置运行时的参数：
module.exports = {
watch: true // 自动重启 webpack
};然后，在我们的 webpack.config.js 文件中，我们需要引入 webpack-watch-config：
const config = require('webpack-watch-config'); // 引入 webpack-watch-config
module.exports = config({
// 这里是你的 webpack 配置
});最后，我们在 package.json 中的 scripts 中添加以下代码：
"scripts": {
"start": "webpack --config webpack/webpack.config.js --watch --env.NODE_ENV=development --env.NODE_CONFIG_ENV=development",
// 其它
}这样，当我们运行 npm start 命令时，webpack-watch-config 将会自动监视 webpack 的配置文件，当它发生改变时，它将会自动重启 webpack。
示例代码
webpack.run.js
module.exports = {
watch: true
};webpack.config.js
-- -------------------- ---- -------
----- ------ - --------------------------------
-------------- - --------
------ -
---- ----------------
--
------- -
--------- -------------------
----- --------- - -------
--
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- --------------
-
-
-
-
---package.json
"scripts": {
"start": "webpack --config webpack/webpack.config.js --watch --env.NODE_ENV=development --env.NODE_CONFIG_ENV=development"
}结论
webpack-watch-config 使得你的 webpack 配置文件可以更加灵活和可维护。它使得你可以自动监视你的配置文件，并且可以自动重启 webpack。这将会帮助你提高前端开发效率，并且可以减少因为错误配置带来的耗时和不必要的破坏。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005668681e8991b448e2b44