webpack 4无法编译json文件

Question

我正在使用React Boilerplate 3.7.0和webpack 4.23.1。

在我的项目中，我要加载一个json文件，而webpack抱怨：

ERROR in ./app/manifest.json (./node_modules/file-loader/dist/cjs.js?name=[name].[ext]!./app/manifest.json)
Module parse failed: Unexpected token m in JSON at position 0 while parsing near 'module.exports = __w...'
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token m in JSON at position 0 while parsing near 'module.exports = __w...'
    at JSON.parse (<anonymous>)
    at parseJson (/home/username/myproject/node_modules/json-parse-better-errors/index.js:7:17)
    at JsonParser.parse (/home/username/myproject/node_modules/webpack/lib/JsonParser.js:16:16)
    at doBuild.err (/home/username/myproject/node_modules/webpack/lib/NormalModule.js:445:32)
    at runLoaders (/home/username/myproject/node_modules/webpack/lib/NormalModule.js:327:12)
    at /home/username/myproject/node_modules/loader-runner/lib/LoaderRunner.js:370:3
    at iterateNormalLoaders (/home/username/myproject/node_modules/loader-runner/lib/LoaderRunner.js:211:10)
    at iterateNormalLoaders (/home/username/myproject/node_modules/loader-runner/lib/LoaderRunner.js:218:10)
    at /home/username/myproject/node_modules/loader-runner/lib/LoaderRunner.js:233:3
    at runSyncOrAsync (/home/username/myproject/node_modules/loader-runner/lib/LoaderRunner.js:130:11)
 @ ./app/app.js 30:0-56
 @ multi ./node_modules/react-app-polyfill/ie11.js webpack-hot-middleware/client?reload=true ./app/app.js

根据Webpack官方文档：由于webpack> = v2.0.0，默认情况下将导入JSON文件。

我在Unexpected token m in JSON at position 0 error中发现raw-loader可以解决问题。但是也没有成功。这是我的webpack.base.babel.js：

/**
 * COMMON WEBPACK CONFIGURATION
 */

const path = require('path');
const webpack = require('webpack');

process.noDeprecation = true;

module.exports = options => ({
  mode: options.mode,
  entry: options.entry,
  output: Object.assign(
    {
      path: path.resolve(process.cwd(), 'build'),
      publicPath: '/',
    },
    options.output,
  ),
  optimization: options.optimization,
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: options.babelQuery,
        },
      },
      {
        test: /\.css$/,
        include: /node_modules/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.scss$/,
        exclude: /node_modules/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
      {
        test: /\.(eot|otf|ttf|woff|woff2)$/,
        use: 'file-loader',
      },
      {
        test: /\.svg$/,
        use: [
          {
            loader: 'svg-url-loader',
            options: {
              // Inline files smaller than 10 kB
              limit: 10 * 1024,
              noquotes: true,
            },
          },
        ],
      },
      {
        test: /\.(jpg|png|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              // Inline files smaller than 10 kB
              limit: 10 * 1024,
            },
          },
          {
            loader: 'image-webpack-loader',
            options: {
              mozjpeg: {
                enabled: false,
                // NOTE: mozjpeg is disabled as it causes errors in some Linux environments
                // Try enabling it in your environment by switching the config to:
                // enabled: true,
                // progressive: true,
              },
              gifsicle: {
                interlaced: false,
              },
              optipng: {
                optimizationLevel: 7,
              },
              pngquant: {
                quality: '65-90',
                speed: 4,
              },
            },
          },
        ],
      },
      {
        test: /\.html$/,
        use: 'html-loader',
      },
      {
        test: /\.(mp4|webm)$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 10000,
          },
        },
      },
    ],
  },
  plugins: options.plugins.concat([    
    // Always expose NODE_ENV to webpack, in order to use `process.env.NODE_ENV`
    // inside your code for any environment checks; Terser will automatically
    // drop any unreachable code.
    new webpack.DefinePlugin({
      'process.env': {
         NODE_ENV: JSON.stringify(process.env.NODE_ENV),
      },
    }),
    new webpack.NamedModulesPlugin(),
  ]),
  resolve: {
    modules: ['node_modules', 'app'],
    extensions: ['.js', '.jsx', '.react.js'],
    mainFields: ['browser', 'jsnext:main', 'main'],
  },
  devtool: options.devtool,
  target: 'web', // Make web variables accessible to webpack, e.g. window
  performance: options.performance || {},
});

我的问题是：如何解决这个问题？我应该包括或删除什么才能使它正常工作？

Answer 1

要使 json 文件可用，您可能需要使用更简单的方法 - fetch 及其 API。基本示例是：

fetch('./myJsonFile.json')
  .then(res => res.json())
  .then(data => {
    console.log(data);
  });