即使使用json loader,webpack也无法解析json

Question

我正在尝试为我的reactjs应用程序的状态加载JSON文件,但webpack不断抛出此错误:

ERROR in ./src/data/questions.json
Module parse failed: C:\Users\[...]\myApp\src\data\questions.json
Unexpected token (2:9)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (2:9)
...

JSON文件是有效的,我正在使用json-loader for webpack,所以我不确定是什么问题.

这是我的webpack.config.json档案:

module.exports = {
  entry: __dirname + '/src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist/js'
  },
  cache: true,
  debug: true,
  devtool: 'source-map',
  module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude: /(node_modules|\.c9)/,
      loader: 'babel',
      query: {
        presets: ['react', 'es2015', 'stage-0']
      }
    }, {
      test: /\.json$/,
      loader: 'json-loader'
    }]
  }
};

这就是我导入JSON文件的方式:

const quizes = [
  require('./data/questions.json')
];

如果我将以上行更改为:

const quizes = [
  require('json!./data/questions.json')
];

我得到一个不同的错误:

ERROR in ./~/json-loader!./src/data/questions.json
Module build failed: SyntaxError: Unexpected token m
    at Object.parse (native)
    at Object.module.exports (C:\Users\[...]\myApp\node_modules\json-loader\index.js:7:48)

更奇怪的是,使用上面的方法(json!前缀),错误被立即抛出(在初始构建期间).但是,如果我将它留在webpack配置加载器中,初始构建完成没有错误,但后续构建会抛出错误.

尽管如此,我的应用程序仍然可以在大多数时间使用.这里发生了什么？

Answer 1

较旧的问题，但您已经指定了加载程序两次：一次webpack.config.js又一次与您的require. 使用其中之一即可消除错误。