Webpack是否支持按不同入口配置差异化的模块解析规则？

最优解决方案 #

核心思路是通过构建环境变量标记当前入口，结合Webpack原生解析规则实现稳定的差异化导入，完全规避你之前遇到的入口识别不稳定、dev-server适配问题。

方案1：类React Native平台专属后缀适配（优先推荐，业务代码零侵入） #

完全符合你要的自动匹配环境专属文件的需求：

1. 给不同入口的构建命令配置独立环境变量，先安装跨平台环境变量工具cross-env，然后修改package.json的scripts配置：

{
  "serve:env1": "cross-env ENTRY_ENV=env1 webpack serve",
  "serve:env2": "cross-env ENTRY_ENV=env2 webpack serve",
  "build:env1": "cross-env ENTRY_ENV=env1 webpack build",
  "build:env2": "cross-env ENTRY_ENV=env2 webpack build"
}

2. 在webpack.config.js中调整解析后缀优先级，把当前环境的专属后缀提到最前面：

const entryEnv = process.env.ENTRY_ENV || 'env1'

module.exports = {
  // 原有entry、loader等配置保持不变
  resolve: {
    // 构建env2时会优先匹配.env2.ts后缀的文件，找不到再回退到通用文件
    extensions: [`.${entryEnv}.ts`, `.${entryEnv}.tsx`, '.ts', '.tsx', '.js', '.json']
  }
}

配置完成后，当你运行env2的构建/启动命令时，import {someVars} from "./foo/settings"会自动优先匹配同目录下的settings.env2.ts，匹配失败才会加载原有的settings.ts，完全不需要修改业务代码的导入语句。

方案2：路径重定向（适合需要把文件映射到其他目录的场景） #

如果你需要把./foo/settings.ts直接定向到./bar/settings.ts，可以用Webpack原生的NormalModuleReplacementPlugin实现：

const entryEnv = process.env.ENTRY_ENV || 'env1'
const webpack = require('webpack')

module.exports = {
  // 原有配置保持不变
  plugins: [
    new webpack.NormalModuleReplacementPlugin(
      /^\.\/foo\/settings\.ts$/,
      (resource) => {
        if (entryEnv === 'env2') {
          resource.request = './bar/settings.ts'
        }
      }
    )
  ]
}

如果有多个路径需要替换，自行维护映射表批量配置即可。

内容的提问来源于stack exchange，提问作者Maarten