如何使用webpack-dev-server来处理多个webpack配置？

Question

如何使用webpack-dev-server来处理多个webpack配置？

8

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

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

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

是否可能配置webpack-dev-server来服务于所有三个？

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

- Jack Allan

我现在也面临着非常类似的问题。你找到任何解决方法了吗？ - Sebastian Kaczmarek

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- sdgluck · Accepted Answer

仅使用webpack-dev-server无法实现此目的，因为该工具仅构建用于监视和提供单个Webpack应用程序配置。

因此，高级答案是：同时运行webpack-dev-server以针对应用程序，以及每个包依赖项使用一个监视器。监视器中的任何一个重建将导致Webpack重新构建应用程序。

如果您尚未在monorepo中管理您的软件包，请尝试使用lerna进行管理，因为这会使所有操作都更加简洁明了一些。

假设：

使用lerna在monorepo中管理软件包
每个软件包（和应用程序）都有一个webpack.config.js
使用Yarn

步骤：

for each dependency package, e.g. moduleA:
- install cross-env:
```
yarn add cross-env
```
- set up webpack as a watcher in development mode by adding watch to the config:
```
watch: process.env.NODE_ENV === "development"
```
- add an NPM script "start:dev":
```
"start:dev": "cross-env NODE_ENV=development webpack --config webpack.config.js"
```

for the application package, e.g. mainApp:

install cross-env:
```
yarn add cross-env
```

add an NPM script "start:dev":

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

in the monorepo root:

install concurrently
```
yarn add concurrently
```

add the NPM scripts* for calling the application and each dependency package's "start:dev" and a "start:dev" which uses them:

"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 your monorepo with lerna:
```
lerna bootstrap
```
start the app dev server and watchers for all of the dependency packages:
```
npm run start:dev
```
navigate to your application dev server endpoint, e.g. localhost:8080

附加说明：如果单体仓库不可行，您可以考虑使用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中使用这些脚本，则必须折叠换行符。