多个带有浏览器列表和babel预设环境的webpack捆绑包

Question

• 我正在使用Webpack 4捆绑。
• 我在webpack.config.js中导出了多个Webpack配置。
• 第一个配置是捆绑针对浏览器的有效代码。
• 第二个配置是捆绑服务器代码定位节点。
• 我正在使用package.json中的browserslist指定这些浏览器和节点目标。

我需要为客户端和服务器捆绑包指定不同的浏览器列表，但是package.json中只有一个浏览器列表键。

如何使用package.json指定不同的浏览器列表？

Answer 1

您不必使用 package.json。如果您在项目的根目录下创建一个名为 .browserslistrc 或 browserslist 的文件，您可以使用不同的配置。

# Any general config goes at the very top, above any section headers
# ...

# Put section headers in [brackets]

[node]
supports es6-modules

[web]
>1% and not dead

然后调用 webpack 并设置 BROWSERSLIST_ENV：

BROWSERSLIST_ENV=dev webpack -c webpack.dev.js # Build development
BROWSERSLIST_ENV=prod webpack -c webpack.prod.js # Build production

您的 webpack 命令可能因您的配置而异。