如何组织 npm 脚本和几个 webpack 配置？

Question

我在项目中有多个仪表板，我决定在 package.json 中为每个仪表板制作单独的脚本（在开发中，当您只使用一个仪表板时构建所有仪表板不是很有用。这需要更多时间）。首先我发现通过脚本可以启动具体的 webpack config.So 它看起来像：

"scripts": {
    "dash1": "export NODE_ENV=development && webpack --config=webpack.dash1.config.js  -d --watch --display-error-details export name=employee ",
    "dash2": "export NODE_ENV=production && webpack --config=webpack.dash2.config.js --progress",
    "dash3": "export NODE_ENV=development && webpack --config=webpack.dash3.config.js -d --watch --display-error-details",
}

在这种情况下，我将需要 3 个单独的 webpack 配置文件，我将在其中指定适当的入口文件。但是有没有可能以某种方式在 npm 脚本中传递参数并在 webpack 配置中检查它？也许可以根据从 npm-script 参数传输的内容对条目执行条件检查？

Answer 1

Webpack 配置文件只是 javascript - 所以一切顺利。在你的情况下你可以

使用环境变量

https://webpack.js.org/guides/environment-variables/

NODE_ENV=development DASHBOARD=dash1 webpack --config=webpack.config.js

(p.s。你不需要export blah &&)

对扩展此配置的每个仪表板使用基本配置和配置

config
├── base.config.js
├── dash1.config.js // extends base.config.js
└── dash2.config.js

并使用 https://github.com/survivejs/webpack-merge 之类的工具来帮助合并基本配置。

如何组织 npm 脚本和几个 webpack 配置？

How to organize npm scripts and several webpack configs?

javascript

npm

webpack

bundle

bundler