Question

我正在尝试根据传递给webpack的参数构建一个不同的bundle。

我有一个create-react-app我已经退出，目前如果我npm run build它使用webpack构建一个包。因为我有这个网站的英文和西班牙版本，所以我希望我能在这里传递一个论点。即建立类似npm run build:es的西班牙语版本。

我的webpack文件目前只构建英文包。在应用程序中有一个单独的过程来提取翻译，但是在构建bundle期间，如果我可以规定构建bundle的语言将是很好的。

任何人都有任何想法。

相关的webpack代码如下：

//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]
          }))
    }
},

Answer 1

Webpack可以接收--env参数，然后将其传递给webpack.config文件。关键是导出一个从webpack.config.js返回配置的函数，而不是原始配置。

$ webpack --env=lang_es

在webpack.config.js：

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

在package.json：

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

这最初是为了区分构建类型，例如：开发或生产，但它只是一个传递给配置文件的字符串 - 你可以给它任何你想要的意思。

正如评论中暗示的那样，使用环境变量是第二种与webpack无关的方法。您可以直接在package.json的脚本部分中设置环境变量：

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

（使用cross-env在Windows上进行开发时设置环境。

在webpack.config.js：

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

这种基于环境的方法已经在一些地方使用过（例如Babel的BABEL_ENV变量），所以我说它已经收集了足够的里程来考虑它经过验证和测试。

编辑：修复了交叉环境部分，提到它只在Windows上有用。

将变量传递给webpack以构建不同的包

1 个答案: