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未捕获TypeError：无法读取属性＆＃39; ADD_FLASH_MESSAGE＆＃39;未定义的在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中配置babel-loader这样的人：

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

Answer 2

在我完全更改webpack.config之后错误仍然存在，我发现我没有返回 Array.reduce 方法，该方法是为了镜像一系列操作，所以webpack编译了这么长时间因为文件路径是正确的，但由于函数返回void而无法加载。找到'foo><script>alert("Hello, world!");</script></foo' here - 只是缺少返回关键字

捆绑的脚本无法在浏览器

2 个答案: