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

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 对应用程序进行后续重建。

如果您还没有在单一存储库中管理您的包，我建议您这样做，因为这会让这一切变得不那么难看。

假设：

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

脚步：

1. 对于每个依赖包，例如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"
     

2. 对于应用程序包，例如mainApp：

   • 安装cross-env：

     yarn add cross-env
     

   • 添加 NPM 脚本"start:dev"：

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

3. 在 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 的根目录中）：

1. 使用 lerna引导您的 monorepo：

   lerna bootstrap
   

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

   npm run start:dev
   

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

___

附录：如果单一存储库不可行，您可以yarn link在应用程序中查看使用和 NPM 脚本的组合package.json，如下所示*：

{
    "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.