pass variable to webpack to build different bundle

Question

I am trying to build a different bundle based on an argument passed to webpack.

I have a create-react-app that I have ejected from and currently currently if I do npm run build it builds a bundle using webpack. As I have both an english and spanish version of the site I was hoping that I could pass an argument here. i.e. to build a Spanish version something like npm run build:es.

My webpack file currently just builds the English bundle. There is a separate process during the application to pull in translations, but during the building of the bundle it would be great if I could stipulate which language to build the bundle for.

Anyone have any ideas.

The relevant webpack code is below:

//default messages for translations
var defaultMessages = require('/translations/en.json');

//more webpack stuff......

{
    test: /\.(js|jsx)$/,
    loader: require.resolve('string-replace-loader'),
    query: {
          multiple: Object.keys(defaultMessages).map(key => ({
           search: `__${key}__`,
           replace: defaultMessages[key]
          }))
    }
},

You could set different environment variables and import based on that? — evolutionxbox
– evolutionxbox, Commented Jul 19, 2017 at 8:17
@evolutionxbox I'm not sure, that's why I am asking the question :-) — user7597670
– user7597670, Commented Jul 19, 2017 at 8:19
@evolutionxbox i know man, I appreciate it :-) just a bit stuck with this one! — user7597670
– user7597670, Commented Jul 19, 2017 at 8:21

Stefan Dragnev · Accepted Answer · 2017-07-19 09:35:12Z

5

Webpack can receive a --env argument, which is then passed to the webpack.config file. The key is to export a function returning the configuration from your webpack.config.js, not the raw configuration.

$ webpack --env=lang_es

And in webpack.config.js:

module.exports = function(env) {
  if (env === 'lang_es') {
    // ...
  }
  return {
    module: {
      // ...
    },
    entry: {
      // ...
    }
  }
}

And in package.json:

"scripts": {
  "build_es": "webpack --env=lang_es",
}

This was originally really meant to distinguish between build types, e.g. development or production, but it's just a string passed into the config file - you can give it any meaning you want.

As hinted in the comments, using environment variables is the second, webpack-independent, approach. You can set the environment variable directly in package.json's scripts section:

"scripts": {
  "build_es": "BUILD_LANG=es webpack",
}

(Use cross-env to set the environment when developing on Windows).

And in webpack.config.js:

if (process.env.BUILD_LANG === 'es') {
  // ...
}

This environment-based approach has been used in a few places already (for example Babel's BABEL_ENV variable), so I'd say that it has gathered enough mileage to consider it proven and tested.

Edit: fixed the cross-env part to mention that it's only necessary on Windows.

edited Jul 19, 2017 at 9:35

answered Jul 19, 2017 at 9:04

Stefan Dragnev

14.5k6 gold badges51 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

user7597670 Over a year ago

hey @stefan. in my package.json my build:prod command looks like this:build:prod: APP_ENV=production npm run build . If I want to extend this should it be build_es: APP_ENV=production npm run build cross-env BUILD_LANG=es webpack? I have tried this but it doesn't seem to work, quite possibly because of the APP_ENV and cross-env

Stefan Dragnev Over a year ago

You don't actually need cross-env, unless you're developing on Windows (should have mentioned that). It should be APP_ENV=production BUILD_LANG=es webpack

user7597670 Over a year ago

thanks! does that mean I can also drop npm run build?

Stefan Dragnev Over a year ago

If it just runs webpack, sure. But it doesn't hurt to run npm run build.

user7597670 Over a year ago

process.env.BUILD_LANG gets picked up as undefined is the only thing

|

Collectives™ on Stack Overflow

pass variable to webpack to build different bundle

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related