Webpack 4 не может скомпилировать файл JSON - PullRequest
0 голосов
/ 10 декабря 2018

Я использую React Boilerplate 3.7.0 и веб-пакет 4.23.1.

В моем проекте у меня есть файл json для загрузки, и веб-пакет жалуется:

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 будет работатьпо умолчанию.

Я нашел здесь в Неожиданный токен m в JSON в позиции 0, ошибка , что 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 || {},
});

Мой вопрос: как это решить?Что я должен включить или удалить, чтобы это работало?

...