webpack - 如何将 webpack-dev-server 与多个 webpack 配置一起使用？

Question

想象一下我有一个这样的项目:

/moduleA/src...
/moduleB/src...
/mainApp/src...

每个模块和主应用程序都有一个单独的 webpack.config。模块是库，主应用程序导入这些库。

是否可以将 webpack-dev-server 配置为为所有三个服务？

我想避免的是每次我想对模块A或B进行更改时都必须停止开发服务器，重建模块A和模块B，然后重新启动开发服务器。

Answer 1

不与 webpack-dev-server只是因为该工具是为监视和服务单个 webpack 而构建的 申请仅配置。

所以高级别的答案是:运行webpack-dev-server同时为应用程序和每个包依赖项的观察者。其中一个观察者的重建将导致 webpack 对应用程序进行后续重建。

如果你还没有在 monorepo 中管理你的包，我建议你这样做，因为它让这一切变得不那么难看。

假设:

使用 lerna 在 monorepo 中管理包

每个包(和应用程序)都有一个 webpack.config.js

您正在使用 Yarn

脚步:

对于每个依赖包，例如moduleA :

安装 cross-env :

yarn add cross-env

通过添加 watch 将 webpack 设置为开发模式下的观察者到配置:

watch: process.env.NODE_ENV === "development"

添加 NPM 脚本 "start:dev" :

"start:dev": "cross-env NODE_ENV=development webpack --config webpack.config.js"

对于应用程序包，例如mainApp :

安装 cross-env :

yarn add cross-env

添加 NPM 脚本 "start:dev" :

"start:dev": "cross-env NODE_ENV=development webpack --config webpack.config.js"

在 monorepo 根目录中:

安装 concurrently

yarn add concurrently

添加用于调用应用程序的 NPM 脚本* 和每个依赖包的 "start:dev"和 "start:dev"它使用它们:

"watch:app": "cd packages/mainApp && npm run start:dev",
"watch:moduleA": "cd packages/moduleA && npm run start:dev",
"watch:moduleB": "cd packages/moduleB && npm run start:dev",
"start:dev": "
    concurrently
        \"npm run watch:app\"
        \"npm run watch:moduleA\"
        \"npm run watch:moduleB\"
"

运行步骤(在 monorepo 的根目录中):

bootstrap你的 lerna 的 monorepo:

lerna bootstrap

启动所有依赖包的应用程序开发服务器和观察程序:

npm run start:dev

导航到您的应用程序开发服务器端点，例如localhost:8080

___

附录:如果monorepo是不可能的，你可以看看使用 yarn link 的组合以及应用程序的 package.json 中的 NPM 脚本看起来像*:

{
    "start:dev": "
        concurrently
            \"cross-env NODE_ENV=development webpack --config webpack.config.js\" 
            \"cd ./node_modules/moduleA && npm run start:dev\"
            \"cd ./node_modules/moduleB && npm run start:dev\"
     "
}

___

*注意:为了便于阅读，在 NPM 脚本中添加了换行符；如果您在 package.json 中使用这些换行符，则必须折叠这些换行符。 .