如何将 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
每个包（和应用程序）都有一个 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，您可以在应用程序的 package.json 中查看使用 yarn link 和 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 中使用它们，则必须折叠换行符。

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

How to use webpack-dev-server with multiple webpack configs?

webpack

webpack-dev-server