使用 Webpack 和 ReactJS 解决错误

Question

我已经阅读了许多其他详细描述类似问题的 S/O 帖子，但是我找不到针对我的特定问题的解决方案。

我安装了一个节点模块，但我现在收到此错误消息：

（音节-是我安装的模块）

index.js:641 ./~/syllable/problematic.json
Module parse failed: /Desktop/App/node_modules/syllable/problematic.json Unexpected token (2:11)
You may need an appropriate loader to handle this file type.

这是我的 Webpack 配置

var config = {
    entry: './main.js',

    output: {
      path: './',
      filename: 'index.js',
    },

    devServer: {
      inline: true,
      port: 3000
    },

    module: {
      loaders: [
        {
          test: /\.jsx$/,
          exclude: /node_modules/,
          loader: 'babel',
          query: {
            presets: ['es2015', 'react']
        },
        {     //<-- this line is throwing an unexpected token error
          test: /\.json$/,
          loader: 'json'
        }
      }
    ]
  }
}

module.exports = config;

注意：我已经安装了 es2015，我尝试重写 webpack.config.js 几次都无济于事。

我做错了什么？

Answer 1

它正在尝试加载.json 文件。您目前没有json-loader 设置来处理此类事情。看看json-loader。

示例

npm install --save-dev json-loader

webpack.config.js

...
module: {
  loaders: [
    {
      test: /\.jsx$/,
      exclude: /node_modules/,
      loader: 'babel',

      query: {
        presets: ['es2015', 'react']
      }
    },
    {
      test: /\.json$/,
      loader: 'json'
    }
  }
]
...

Answer 2

什么是错误和消息

index.js:641 ./~/syllable/problematic.json 模块解析失败： /Desktop/App/node_modules/syllable/problematic.json 意外令牌 (2:11) 你可能需要一个合适的加载器来处理这个文件类型

然后回答

你真的应该阅读它，它清楚地表明模块解析失败。它给了你文件名并告诉你你可能需要一个合适的加载器来处理这个文件类型

json-loader 你需要什么

使用 npm 安装 json-loader 并将其添加到您的配置中。

{
  test: /\.json$/,
  loader: 'json'
}

Answer 3

目前您的正则表达式不匹配任何文件扩展名。如果您尝试同时测试 .js 和 .jsx 文件，请删除最后一个 $ 并将其替换为 ? 并删除 |。

module:{
    loaders: [
        {
            test: /\.jsx?/,
            exclude: /node_modules/,
            loader: 'babel',

            query: {
                presets: ['es2015', 'react']
            }
        }
    ]
}