Webpack 4模块解析失败：意外令牌

我有一个基于React样板文件3.7.0的React.js项目，我正在使用它自己的webpack配置文件，即webpack.base.babel.js、webpack.dev.babel.js和webpack.prod.babel.js。 我在网络上寻找解决方案已经有一段时间了，但我找不到解决这个问题的方法。里面有一条横幅，上面写着：

如有疑问，请张贴在堆栈溢出上并使用“webpack”标记

我又来了。如果我运行npm start，Webpack编译项目时不会出现错误和警告，但如果我运行npm run build或npm run script build，它会告诉我：

    > react-boilerplate@3.7.0 prebuild /home/user/project
    > npm run build:clean

    > react-boilerplate@3.7.0 build:clean /home/user/project
    > rimraf ./build

    > react-boilerplate@3.7.0 build /home/user/project
    > cross-env NODE_ENV=production webpack --config internals/webpack/webpack.prod.babel.js --color -p --progress --hide-modules --display-optimization-bailout

    Hash: c6a237769a07ad14e665                                                           
    Version: webpack 4.27.1
    Time: 40850ms
    Built at: 2019-01-28 09:40:17
     250 assets
    Entrypoint main = runtime~main.d96d827d2fca77de74ac.js vendor.4d1e1f30cd3a7c98cfd8.chunk.js main.01e9d47c88b2e7155bd5.chunk.js

    ERROR in ./node_modules/jqwidgets-scripts/jqwidgets-react/react_jqxgrid.js 1216:12
    Module parse failed: Unexpected token (1216:12)
    You may need an appropriate loader to handle this file type.
    |     render() {
    |         return (
    >             <div id={this.state.id}>{this.props.value}{this.props.children}</div>
    |         )
    |     };
     @ ./app/containers/xxxxxxx/index.js 38:0-70 343:37-44
     ...
     @ ./app/containers/MainLayout/_nav.js
     @ ./app/containers/MainLayout/index.js
     @ ./app/containers/MainLayout/Loadable.js
     @ ./app/containers/App/index.js
     @ ./app/app.js
     @ multi ./node_modules/react-app-polyfill/ie11.js ./app/app.js
...

这是我的webpack.base.babel.js文件：

这里有一个正则表达式来排除node_模块，但要包括jqwidgets脚本/jqwidgets react，接下来还有一个注释块，使用另一种方法，也没有成功

这是webpack.prod.babel.js：

最后是我的babel.config.js：

---

我错过了什么？我做错什么了吗？我怎样才能让它在生产中发挥作用？

我使用了相同的样板-Boilerplate@3.7.0而且效果很好。 既然我看不到你的代码，我想它和jqwidgets脚本有关，为什么要用这种方式传输它呢？ 您需要做的是将其从webpack.config文件中删除并导入到代码库中，如中所述

编辑： 那么基于 要解决此问题，您必须更新webpack.base.babel.js文件：

在代码中，您可以开始直接使用jqwidgets

import JqxBarGauge from 'jqwidgets-scripts/jqwidgets-react/react_jqxbargauge.js'

---

您能提供更详细的回答吗？首先，为什么要尝试传输jqwidgets？我的意思是，为什么要排除：/node\u模块\/？！jqwidgets scripts\/jqwidgets react\/.*/？我使用jqwidgets作为依赖项，因此，我排除了node_模块，但包括了本文推荐的jqwidgets，我看到您包括jqwidgets react，但我只在您刚刚粘贴的链接中看到ignore:['node_模块/jqwidgets脚本/jqwidgets']，这也排除了它。您不必这样做，您可以在您的网页文件和代码中排除：/node_modules/：从“jqwidgets scripts/jqwidgets react/react_jqxbargague.js”导入jqxbargague，它应该可以工作

const path = require('path');
const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const config = require('../../server/config');

module.exports = options => ({
  mode: options.mode,
  entry: options.entry,
  output: Object.assign(
    {
      // Compile into js/build.js
      path: path.resolve(process.cwd(), 'build'),
      publicPath: '/',
    },
    options.output,
  ), // Merge with env dependent settings
  optimization: options.optimization,
  module: {
    rules: [
      {
        test: /\.js$|\.jsx$/, // Transform all .js files required somewhere with Babel
        exclude: /node_modules\/(?!(jqwidgets-scripts\/jqwidgets-react)\/).*/,
        use: {
          loader: 'babel-loader',
          options: options.babelQuery,
        },
      },
      // {
      //   test: /\.js$|\.jsx$/,
      //   exclude: '/node_modules',
      //   include: '/jqwidgets-scripts/jqwidgets-react',
      //   use: {
      //     loader: 'babel-loader',
      //     options: options.babelQuery
      //   }
      // },
      {
        // Preprocess our own .css files
        // This is the place to add your own loaders (e.g. sass/less etc.)
        // for a list of loaders, see https://webpack.js.org/loaders/#styling
        test: /\.scss$/,
        exclude: /node_modules/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
      {
        // Preprocess 3rd party .css files located in node_modules
        test: /\.css$/,
        include: /node_modules/,
        use: ['style-loader', 'css-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.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
    }), */

    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(config.env),
        HOST: JSON.stringify(config.server_host),
        PORT: JSON.stringify(config.server_port),
      },
    }),

    new webpack.NamedModulesPlugin(),
    new CopyWebpackPlugin([{ from: 'static' }]),
  ]),
  resolve: {
    modules: ['node_modules', 'app'],
    extensions: ['.js', '.jsx', '.react.js'],
    mainFields: ['browser', 'jsnext:main', 'main'],
    alias: {
      moment$: 'moment/moment.js',
    },
  },
  devtool: options.devtool,
  target: 'web', // Make web variables accessible to webpack, e.g. window
  performance: options.performance || {},
});

// Important modules this config uses
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackPwaManifest = require('webpack-pwa-manifest');
const OfflinePlugin = require('offline-plugin');
const { HashedModuleIdsPlugin } = require('webpack');
const TerserPlugin = require('terser-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');

module.exports = require('./webpack.base.babel')({
  mode: 'production',

  // In production, we skip all hot-reloading stuff
  entry: [
    require.resolve('react-app-polyfill/ie11'),
    path.join(process.cwd(), 'app/app.js'),
  ],

  // Utilize long-term caching by adding content hashes (not compilation hashes) to compiled assets
  output: {
    filename: '[name].[chunkhash].js',
    chunkFilename: '[name].[chunkhash].chunk.js',
  },

  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          warnings: false,
          compress: {
            comparisons: false,
          },
          parse: {},
          mangle: true,
          output: {
            comments: false,
            ascii_only: true,
          },
        },
        parallel: true,
        cache: true,
        sourceMap: true,
      }),
    ],
    nodeEnv: 'production',
    sideEffects: true,
    concatenateModules: true,
    splitChunks: {
      chunks: 'all',
      minSize: 30000,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      name: true,
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          chunks: 'all',
        },
        main: {
          chunks: 'all',
          minChunks: 2,
          reuseExistingChunk: true,
          enforce: true,
        },
      },
    },
    runtimeChunk: true,
  },

  plugins: [
    // Minify and optimize the index.html
    new HtmlWebpackPlugin({
      template: 'app/index.html',
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true,
      },
      inject: true,
    }),

    // Put it in the end to capture all the HtmlWebpackPlugin's
    // assets manipulations and do leak its manipulations to HtmlWebpackPlugin
    new OfflinePlugin({
      relativePaths: false,
      publicPath: '/',
      appShell: '/',

      // No need to cache .htaccess. See http://mxs.is/googmp,
      // this is applied before any match in `caches` section
      excludes: ['.htaccess'],

      caches: {
        main: [':rest:'],

        // All chunks marked as `additional`, loaded after main section
        // and do not prevent SW to install. Change to `optional` if
        // do not want them to be preloaded at all (cached only when first loaded)
        additional: ['*.chunk.js'],
      },

      // Removes warning for about `additional` section usage
      safeToUseOptionalCaches: true,
    }),

    new CompressionPlugin({
      algorithm: 'gzip',
      test: /\.js$|\.css$|\.html$/,
      threshold: 10240,
      minRatio: 0.8,
    }),

    new WebpackPwaManifest({
      name: 'React Boilerplate',
      short_name: 'React BP',
      description: 'My React Boilerplate-based project!',
      background_color: '#fafafa',
      theme_color: '#b1624d',
      inject: true,
      ios: true,
      icons: [
        {
          src: path.resolve('app/images/icon-512x512.png'),
          sizes: [72, 96, 128, 144, 192, 384, 512],
        },
        {
          src: path.resolve('app/images/icon-512x512.png'),
          sizes: [120, 152, 167, 180],
          ios: true,
        },
      ],
    }),

    new HashedModuleIdsPlugin({
      hashFunction: 'sha256',
      hashDigest: 'hex',
      hashDigestLength: 20,
    }),
  ],

  performance: {
    assetFilter: assetFilename =>
      !/(\.map$)|(^(main\.|favicon\.))/.test(assetFilename),
  },
});

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        modules: false,
      },
    ],
    '@babel/preset-react',
  ],
  plugins: [
    'styled-components',
    '@babel/plugin-proposal-export-namespace-from',
    '@babel/plugin-proposal-class-properties',
    '@babel/plugin-syntax-dynamic-import',
  ],
  env: {
    production: {
      only: ['app'],
      plugins: [
        'lodash',
        'transform-react-remove-prop-types',
        '@babel/plugin-transform-react-inline-elements',
        '@babel/plugin-transform-react-constant-elements',
      ],
    },
    test: {
      plugins: [
        '@babel/plugin-transform-modules-commonjs',
        'dynamic-import-node',
      ],
    },
  },
};

import JqxProgressBar from '../../../jqwidgets-react/react_jqxprogressbar.js';
import JqxButton from '../../../jqwidgets-react/react_jqxbuttons.js';
import JqxCheckBox from '../../../jqwidgets-react/react_jqxcheckbox.js';

{
     test: /\.js$/,
     exclude: /node_modules/,
     use: {
        loader: 'babel-loader',
          options: options.babelQuery,
     },
}

import JqxBarGauge from 'jqwidgets-scripts/jqwidgets-react/react_jqxbargauge.js'