在环境变量之前，我们经常在项目中使用process.env.NODE_ENV，但是这个变量对webpack打包有影响，在生产的时候会优化。因此，我们会使用其他环境变量来区分：'development'}"`})像这样，NODE_ENV始终处于生产状态。我们实际的开发/生产环境使用的是变量process.env.API_ENV（由于本项目是koa接口服务项目，所以可以这样命名，随意改）。动态配置打包注意，我们以前在node.js后端项目中是这样写动态配置加载的：constENV=process.env.NODE_ENV||'development';//eslint-disable-next-lineimport/no-dynamic-requireconstoptions=require(`./_${ENV}`);module.exports=options;为了提高ENV的可读性和可能的??重用性，我们将单独定义一个变量。在webpack打包的项目中如果直接这样做，就会出现问题。比如我现在有多个配置：_development.js_test.js_production.js_staging.js即使我传入的当前环境是development，所有的配置文件还是会被打包进来（只是永远不会执行）。在这种情况下，存在敏感信息泄露的风险。正确的姿势应该是这样的：config/index.js//eslint-disable-next-lineimport/no-dynamic-requireconstoptions=require(`./_${process.env.API_ENV||'development'}`);module.exports=选项;模块化打包比如我在项目中webpack中有很多模块，为了负载均衡的需求，或者客户定制的模块化产品，我们需要将它们打包成模块，防止其他模块（永远不会被执行）被打包到webpackbundle中。//config/_development.jsexports.enabledModules=['用户','演示'];//src目录下可能还有其他模块目录，比如'manage'等，在服务端加载时，看起来是这样的：//src/server.js//动态加载启用的模块enabledModules.forEach((mod)=>{/*eslint-disableglobal-require,import/no-dynamic-require*/constroutes=require(`./${mod}/route`);routes.middleware()|>app.使用;}）;然后你需要ContextReplacementPlugin插件来支持它。newwebpack.ContextReplacementPlugin(/src/,newRegExp(`^./(${enabledModules.join('|')})/.*$`))高级使用比如在src目录下，除了每个模块的目录下，还有一些通用的方法类和hook目录，比如：lib和hook。这两个目录是可能被其他子模块共同引用的。在插件规则中修改：newwebpack.ContextReplacementPlugin(/src/,newRegExp(`^./(lib|hook|${enabledModules.join('|')})/.*$`))压缩代码,并添加source-map以支持Uglifyjs或Uglify-es。其实对服务端代码打包不友好，可能会导致打包失败。请改用babel-minify-webpack-plugin插件。配合source-map-support插件支持源码问题定位。示例项目源码：https://github.com/AirDwing/w...
