使用Webpack基于环境的条件构建

JavaScript Webpack

Gil

2020-03-23

我有一些需要开发的东西-例如,我不想让我的分布式构建文件肿的模拟。

在RequireJS中,您可以在插件文件中传递配置,然后根据需要进行配置。

对于webpack,似乎没有做到这一点的方法。首先创建一个环境中运行时配置我用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的方法?

有什么想法可以做到吗?谢谢。

第2766篇《使用Webpack基于环境的条件构建》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

2个回答
神乐米亚蛋蛋 2020.03.23

我一直在努力在我的webpack配置中设置env。我通常想要设置env,以便可以在webpack.config.jspostcss.config.js以及入口点应用程序本身内部(index.js通常)访问它。我希望我的发现可以对某人有所帮助。

我想出的解决方案是传入--env production--env development,然后在其中设置模式webpack.config.js但是,这并不能帮助我在所需的位置进行env访问(请参见上文),因此我还需要process.env.NODE_ENV按照此处的建议进行显式设置webpack.config.js以下是我最相关的部分

...
module.exports = mode => {
  process.env.NODE_ENV = mode;

  if (mode === "production") {
    return merge(commonConfig, productionConfig, { mode });
  }
  return merge(commonConfig, developmentConfig, { mode });
};
西里神奇 2020.03.23

使用环境变量来创建开发和生产部署:

https://webpack.js.org/guides/environment-variables/

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android