使用Webpack基于环境进行条件构建

我有一些需要开发的东西 - 例如模拟，我不想用它来膨胀我的分布式构建文件。

在 RequireJS 中，您可以在插件文件中传递配置，并基于该配置有条件地要求内容。

对于 webpack 似乎没有办法做到这一点。首先为我使用的环境创建运行时配置解析别名 http://webpack.github.io/docs/configuration.html#resolve-alias根据环境重新指向需求，例如：

// All settings.
var all = {
    fish: 'salmon'
};

// `envsettings` is an alias resolved at build time.
module.exports = Object.assign(all, require('envsettings'));

然后在创建 webpack 配置时我可以动态分配哪个文件envsettings指向（即webpackConfig.resolve.alias.envsettings = './' + env).

不过我想做一些类似的事情：

if (settings.mock) {
    // Short-circuit ajax calls.
    // Require in all the mock modules.
}

但显然，如果环境不是模拟的，我不想构建这些模拟文件。

我可以再次使用resolve.alias手动将所有这些需求重新指向存根文件 - 但有没有一种方法感觉不那么hacky？

我有什么想法可以做到这一点吗？谢谢。

您可以使用定义插件 https://github.com/webpack/docs/wiki/list-of-plugins#defineplugin.

我通过在你的 webpack 构建文件中做一些简单的事情来使用它，其中env是导出设置对象的文件的路径：

// Webpack build config
plugins: [
    new webpack.DefinePlugin({
        ENV: require(path.join(__dirname, './path-to-env-files/', env))
    })
]

// Settings file located at `path-to-env-files/dev.js`
module.exports = { debug: true };

然后在你的代码中

if (ENV.debug) {
    console.log('Yo!');
}

如果条件为假，它将从构建文件中删除此代码。你可以看到一个正在运行的Webpack 构建示例在这里 https://github.com/mderrick/webpack-react-boilerplate/blob/master/webpack.default.config.js#L74.