使用create-react-app创建的项目如何排除ConfigCtl.js不被Webpack打包？

我来帮你搞定这个问题！你遇到的核心问题在于Create React App（CRA）默认封装了Webpack配置，直接修改自动生成的webpack.config.dev.js要么不生效，要么会被后续操作覆盖；另外你对externals的路径配置可能也和实际导入路径不匹配，导致Webpack还是把ConfigCtl.js打包进去了。下面给你几个可行的解决方案：

方案一：用react-app-rewired修改配置（推荐，无需eject） #

CRA官方不推荐直接修改隐藏的Webpack配置，react-app-rewired可以让你在不执行eject的前提下自定义配置，步骤如下：

1. 安装依赖包

npm install react-app-rewired customize-cra --save-dev

2. 在项目根目录创建config-overrides.js文件，写入以下内容

const { override, addWebpackExternals } = require('customize-cra');

module.exports = override(
  // 配置externals：键是你代码中导入该文件的相对路径，值是全局变量名
  addWebpackExternals({
    './config/ConfigCtl': 'ConfigCtl'
  })
);

注意：这里的键要和你实际导入的路径完全一致！比如你在App.js里写的是import ConfigCtl from './config/ConfigCtl'，那键就是'./config/ConfigCtl'，不要加.js后缀或绝对路径。

3. 修改package.json中的启动脚本，替换react-scripts为react-app-rewired

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
}

4. 重启开发服务，此时ConfigCtl.js就不会被打包进bundle了，但你需要确保全局存在ConfigCtl变量——比如在public/index.html中通过<script>标签引入该文件：

<script src="/config/ConfigCtl.js"></script>

方案二：如果已经执行了eject（不可逆） #

如果你已经执行了npm run eject暴露了Webpack配置，可以直接修改项目根目录的webpack.config.js：

1. 找到module.exports中的externals配置（如果没有就新增），注意路径要和导入路径匹配，也可以用正则匹配更灵活：

externals: {
  // 精确匹配导入路径
  './config/ConfigCtl': 'ConfigCtl',
  // 或者用正则匹配所有匹配该模块的导入
  /^config\/ConfigCtl$/ : 'ConfigCtl'
}

2. 同样要确保全局有ConfigCtl变量，在public/index.html中引入该文件。

为什么你之前的配置不生效？ #

• 路径不匹配：你写的"./src/config/ConfigCtl.js"是绝对路径，但代码中导入时用的是相对src的路径（比如./config/ConfigCtl），Webpack无法识别这个匹配关系，所以还是会打包该文件。
• 直接修改临时配置文件：未eject时，webpack.config.dev.js是CRA临时生成的文件，修改后会被覆盖，根本不会生效。

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