Webpack构建时Redux模块未被打包的解决方法咨询

看起来你遇到的问题是Webpack只处理了自定义模块，却没把Redux这个第三方模块打包到最终产物里，导致浏览器里Redux变成了undefined。我来帮你排查下常见原因和解决办法：

第一步：确认Redux已正确安装到项目依赖 #

首先先检查你有没有把Redux安装到当前项目里——如果只是全局安装或者没在项目的package.json里注册依赖，Webpack是找不到它的。

• 打开终端，在项目根目录运行：

  npm install redux --save
  # 用yarn的话就运行：
  yarn add redux
  

  这会把Redux添加到package.json的dependencies中，确保Webpack能从node_modules目录里找到它。

第二步：检查Webpack配置的externals字段 #

这是最常见的导致第三方模块不被打包的原因。如果你在Webpack配置里设置了externals，并且把redux列在了里面，Webpack会认为这个模块是外部依赖，不会把它打包进产物，而是期望从全局环境中获取。

• 打开你的Webpack配置文件，查找是否有类似这样的代码：

  module.exports = {
    // ...其他配置项
    externals: {
      redux: 'Redux' // 这行就是问题根源
    }
  }
  

  解决办法分两种：
  • 如果你想把Redux打包进产物：直接删除externals里的redux: 'Redux'这一行，然后重新运行构建命令。
  • 如果你想继续用外部CDN引入Redux：保留externals配置，但要在HTML文件里手动引入Redux的CDN脚本，比如：

    <script src="https://cdn.jsdelivr.net/npm/redux@latest/dist/redux.min.js"></script>
    

    这样浏览器环境里就会存在全局的Redux对象，你的代码就能正常获取到了。

第三步：验证修复效果 #

修改完配置或安装依赖后，重新运行你的构建命令（比如npm run build），然后检查生成的打包文件，搜索redux相关的代码，确认它已经被包含进去。之后刷新浏览器页面，控制台应该就能正常输出Redux的模块对象了。

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