模塊構建失敗：語法錯誤：意外令牌'在JSON在位置0

Question

我這裏有一個的WebPack配置，我想補充moment-timezone一個答案How should I use moment-timezone with webpack?，害得我Webpack - Error: Cannot define 'query' and multiple loaders in loaders list

var webpack = require('webpack'); 

module.exports = { 
    //devtool: 'inline-source-map', 
    entry: [ 
    'webpack-hot-middleware/client', 
    './client/main.js' 
    ], 
    output: { 
    path: require("path").resolve('./assets'), 
    filename: 'bundle.js', 
    publicPath: '/' 
    }, 
    plugins: [ 
    new webpack.HotModuleReplacementPlugin() 
    ], 
    externals: { 
     jquery: 'var jQuery' 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     loaders: ['json-loader', 'babel-loader?presets[]=react,presets[]=es2015,presets[]=react-hmre'], 
     exclude: /node_modules/ 
     } 
    ] 
    } 
}; 

我當前的嘗試在上面。

Answer 1

您正在告訴webpack將您的JavaScript文件傳遞到json-loader。但是因爲JavaScript文件不是有效的JSON，所以會出現第一個字符處已經存在意外標記的錯誤。

{ 
    test: /\.jsx?$/, 
    loaders: ['json-loader', 'babel-loader?presets[]=react,presets[]=es2015,presets[]=react-hmre'], 
    exclude: /node_modules/ 
} 

所以，你需要從.jsx?配置中刪除json-loader。此外，在webpack 2中不再需要json-loader，JSON文件應該可以直接使用。

您可以更新module部分：

module: { 
    rules: [ 
    { 
     test: /\.jsx?$/, 
     loader: 'babel-loader?presets[]=react,presets[]=es2015,presets[]=react-hmre', 
     exclude: /node_modules/ 
    } 
    ] 
} 

但是爲了以防萬一它不應該工作，你就必須添加json-loader在.json結尾的文件：

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