Webpack：如何为 ES5 构建浏览器文件和为 Node:current 构建服务器文件答案

【问题标题】：Webpack: how do I build browser files for ES5 and server files for Node:currentWebpack：如何为 ES5 构建浏览器文件和为 Node:current 构建服务器文件
【发布时间】：2020-02-10 21:16:23
【问题描述】：

我对 Webpack 很陌生。我的新团队正在使用它，而我以前从未使用过它。

我们正在构建一个浏览器包和一个服务器包。

我们使用的是 Webpack 版本 4.41.2

浏览器包必须转译为 ES5。

服务器包在节点 12.6.0 上运行，因此它几乎可以拥有所有可用的东西。我不希望它转译。

在我们的 package.json 中有这两个脚本：

    "build:browser": "webpack --config ./webpack/browser.babel.js",
    "build:server": "webpack --config ./webpack/server.babel.js",

我们拥有的文件browser.babel.js：

  module: {
    rules: base.module.rules.concat([
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader"
      },

文件server.babel.js中也有同样的内容。

我假设这两个都使用默认的.babelrc 文件，该文件声明：

  "presets": ["@babel/preset-env"],

但要关闭转译，我需要更改为：

  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "current"
        }
      }
    ]
  ],

我的问题是，我如何让服务器构建使用将阻止转译的设置并让浏览器构建使用将转译的设置？

有没有办法指定不同的.bablerc 文件？

有没有办法在server.babel.js 文件中指定设置？

我们需要更新到较新版本的 Webpack 吗？

我还有什么需要做的吗？

非常感谢任何帮助！

【问题讨论】：

标签： webpack webpack-4

【解决方案1】：

在server.babel.js 中，您可以将选项传递给babel-loader。你可以指定一个特定的配置文件：https://babeljs.io/docs/en/options#configfile 您可能还想设置babelrc: false

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          // set overrides here
        }
      }
    }
  ]
}

【讨论】：

【解决方案2】：

您根本不需要通过 babel 传递您的服务器构建。

由于它不需要被转译，因此您可以将其从该构建的 webpack 配置脚本中删除。

【讨论】：

不幸的是我别无选择。我能做的最好的就是摆脱 Node 的转译。