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

问题描述

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

Imagine I have a project like this:

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

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

I have a separate webpack.config for each module and the main app. The modules are libraries and the main app imports those libraries.

是否可以配置 webpack-dev-server 来为这三者提供服务?

Is it possible to configure webpack-dev-server to serve all three?

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

What I want to avoid is having to stop the dev server, rebuild moduleA and moduleB, and restart the dev server, every time I want to make a change to moduleA or B.

推荐答案

不使用 webpack-dev-server 只是因为该工具是为观察和服务单个 webpack 应用程序而构建的strong> 仅配置.

Not with webpack-dev-server only because that tool is built to watch and serve a single webpack application configuration only.

所以高层次的答案是:同时为应用程序运行 webpack-dev-server 并为每个包依赖项运行一个观察者.观察者之一的重建将导致 webpack 后续重建应用程序.

So the high level answer is: run webpack-dev-server for the application and a watcher for each package dependency, at the same time. A rebuild by one of the watchers will cause a subsequent rebuild of the application by webpack.

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

I recommend if you are not already managing your packages within a monorepo that you do so, because it makes this all a little bit less ugly.

假设:

• 使用 lerna
在 monorepo 中管理包
• 每个包(和应用程序)都有一个 webpack.config.js
• 您正在使用 纱线

步骤:

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

• 安装cross-env:

yarn add cross-env

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

set up webpack as a watcher in development mode by adding watch to the config:

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

添加一个 NPM 脚本 "start:dev":

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

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

for the application package, e.g. mainApp:

• 安装cross-env:

yarn add cross-env

添加一个 NPM 脚本 "start:dev":

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

在 monorepo 根目录中:

in the monorepo root:

• 安装同时

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 的根目录中):

Steps to run (in the root of the monorepo):

1. bootstrap 与 lerna 的 monorepo:>

1. bootstrap your monorepo with lerna:

lerna bootstrap

为所有依赖包启动应用开发服务器和观察者:

start the app dev server and watchers for all of the dependency packages:

npm run start:dev

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

___

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

Addendum: if a monorepo is out of the question, you can look at a combination of using yarn link and an NPM script in your application's package.json that looks something like*:

{
    "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 中使用这些换行符，则必须折叠换行符.

*Note: newlines within NPM scripts are added for readability; you must collapse the newlines if you use these in your package.json.

这篇关于如何将 webpack-dev-server 与多个 webpack 配置一起使用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！