Webpack: how do I build browser files for ES5 and server files for Node:current

Question

I am very new with Webpack. My new team is using it and I have never used it before.

We are building both a browser bundle and a server bundle.

We are using Webpack version 4.41.2

The browser bundle MUST transpile to ES5.

The server bundle is running on node 12.6.0 so it can have almost everything available. I do not want it to transpile.

in our package.json we have these two scripts:

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

The file browser.babel.js we have:

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

The same thing is in the file server.babel.js.

I assume that both of these use the default .babelrc file which states:

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

But to turn off transpilation I needed to change to this:

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

My question is, how do I get the server build to use the settings that will prevent transpilation and get the browser build to use the setting that will transpile?

Is there a way to specify a different .bablerc file?

Is there a way to specify the settings inside the server.babel.js file?

Do we need to update to a newer version of Webpack?

Is there something else I need to do?

Any help is greatly appreciated!!

Tom Pridham Tom Pridham · Accepted Answer · 2020-02-24T21:41:09

in server.babel.js, you can pass in options to babel-loader. you can specify a specific config file: https://babeljs.io/docs/en/options#configfile you might also want to set babelrc: false

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

Webpack: how do I build browser files for ES5 and server files for Node:current

2 Answers