捆绑脚本无法在浏览器中加载

Question

Webpack 编译成功，但无法在浏览器中加载。在检查 Web 控制台时，我发现在 _webpack_require_ 中无法访问某些模块。 当我在相关模块中将 es6 import 语法更改为 require 时，Web 控制台中抛出的错误消失了。 我不打算进入每个文件并将我的import 语法更改为require。我的 .babelrc 与 webpack.config.js 中的 babel-loader 一起配置。

真的很困惑下一步该做什么，因为这是我第一次使用 webpack

我的 webpack.config.js

 ***test: /\.(js|jsx)$/,
 include: [
   path.join(__dirname, 'client'),
   path.join(__dirname, './template')
 ],
 loader: 'babel-loader',
 exclude: /node_modules/,
 query: { cacheDirectory: true } ***

.babelrc 文件

{
  "presets": [
    "es2015",
    "react",
    "latest",
    "stage-2"
  ],
  "plugins": [
    "react-hot-loader/babel"
  ]
}

flashMessage.js:13 未捕获类型错误：无法读取属性 'ADD_FLASH_MESSAGE' 未定义 在 eval (flashMessage.js:13) 在对象。 (bundle.js:1406) 在 webpack_require (bundle.js:679) 在 fn (bundle.js:89) 在 eval (index.js:9) 在对象。 (bundle.js:1399) 在 webpack_require (bundle.js:679) 在 fn (bundle.js:89) 在 eval (index.js:9)

Answer 1

在我完全改变了我的 webpack.config 之后，错误仍然存​​在，我发现我没有返回 Array.reduce 方法，该方法是为了镜像一组动作，所以 webpack 编译了这么久因为文件路径是正确的，但由于函数返回 void 而无法加载。找到repo linkhere- 只是缺少返回关键字

Answer 2

我个人在 webpack 中像这样配置 babel-loader：

        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            cacheDirectory: true,
            presets: ['react'],
          },
        },