Question

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

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

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

是否可以配置webpack-dev-server来服务这三个？

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

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的恋爱关系：
```
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中使用换行符，则必须折叠换行符。

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

1 个答案: