reactjs - Webpack 生产版本 : Unexpected token

Question

我一直在尝试使用 webpack 部署我的生产版本，但我无法完成。我几乎阅读并尝试了一切，但无法使其正常工作。
这是我遇到的最后一个错误:


我的 webpack 配置如下所示:

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const PreloadWebpackPlugin = require('preload-webpack-plugin');
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
const StyleExtHtmlWebpackPlugin = require('style-ext-html-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
const autoprefixer = require('autoprefixer');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const staticSourcePath = path.join(__dirname, 'static');
const sourcePath = path.join(__dirname, 'src');
const buildPath = path.join(__dirname, 'dist');

    module.exports = {
        devtool: 'cheap-module-source-map',
        entry: {
            // base: path.resolve(staticSourcePath, 'src/sass/base.scss'),
            app: path.resolve(sourcePath, 'index.prod.jsx')
        },
        output: {
            path: path.join(__dirname, 'dist'),
            filename: '[name].[chunkhash].js',
            publicPath: '/'
        },
        resolve: {
            extensions: ['.webpack-loader.js', '.web-loader.js', '.loader.js', '.js', '.jsx'],
            modules: [
                sourcePath,
                path.resolve(__dirname, 'node_modules')
            ]
        },
        plugins: [
            new webpack.DefinePlugin({
                'process.env.NODE_ENV': JSON.stringify('production')
            }),
            new webpack.optimize.ModuleConcatenationPlugin(),
            new webpack.optimize.CommonsChunkPlugin({
                name: 'vendor',
                filename: 'vendor.[chunkhash].js',
                minChunks(module) {
                    return module.context && module.context.indexOf('node_modules') >= 0;
                }
            }),

            new UglifyJsPlugin({
                sourceMap: true,
                uglifyOptions: {
                    ecma: 8,
                    compress: {
                        warnings: false
                    }
                }
            }),
            new webpack.LoaderOptionsPlugin({
                options: {
                    postcss: [
                        autoprefixer({
                            browsers: [
                                'last 3 version',
                                'ie >= 10'
                            ]
                        })
                    ],
                    context: staticSourcePath
                }
            }),
            new webpack.HashedModuleIdsPlugin(),
            new HtmlWebpackPlugin({
                template: path.join(__dirname, 'src', 'index.html'),
                path: buildPath,
                excludeChunks: ['base'],
                // filename: 'index.html',
                minify: {
                    collapseWhitespace: true,
                    collapseInlineTagWhitespace: true,
                    removeComments: true,
                    removeRedundantAttributes: true
                }
            }),
            new PreloadWebpackPlugin({
                rel: 'preload',
                as: 'script',
                include: 'all',
                fileBlacklist: [/\.(css|map)$/, /base?.+/]
            }),
            new ScriptExtHtmlWebpackPlugin({
                defaultAttribute: 'defer'
            }),
            new ExtractTextPlugin({
                filename: '[name].[contenthash].css',
                allChunks: true
            }),
            new CompressionPlugin({
                asset: '[path].gz[query]',
                algorithm: 'gzip',
                test: /\.js$|\.jsx$|\.css$|\.html$|\.eot?.+$|\.ttf?.+$|\.woff?.+$|\.svg?.+$/,
                threshold: 10240,
                minRatio: 0.8
            })
        ],
        module: {
            rules: [
                {
                    test: /\.css$/,
                    use: ['style-loader', 'css-loader']
                },
                {
                    test: /\.(png|jp(e*)g|svg)$/,
                    use: [{
                        loader: 'url-loader',
                        options: {
                            limit: 8000, // Convert images < 8kb to base64 strings
                            name: 'images/[hash]-[name].[ext]'
                        }
                    }]
                },

                {
                    test: /\.(js|jsx)$/,
                    loader: "babel-loader",
                    exclude: /node_modules/,
                    query: {
                        presets: ["es2015", "react", "env"],
                        plugins: [
                            "transform-object-rest-spread",
                            "transform-class-properties"
                        ]
                    }
                },

                {
                    test: /\.(eot?.+|svg?.+|ttf?.+|otf?.+|woff?.+|woff2?.+)$/,
                    use: 'file-loader?name=assets/[name]-[hash].[ext]'
                },
                {
                    test: /\.(png|gif|jpg|svg)$/,
                    use: [
                        'url-loader?limit=20480&name=assets/[name]-[hash].[ext]'
                    ],
                    include: staticSourcePath
                }
            ]
        }
    };

我尝试更改 babel 的预设。我不知道它是否可能是库查询字符串的问题，但即使我不使用它，错误仍然存​​在。
我还尝试了来自 https://github.com/webpack-contrib/uglifyjs-webpack-plugin/issues/104 的几乎所有配置并且无法使其工作:C ....

我希望有人能帮助我我从周末开始就一直在与这个错误作斗争，我快要自杀了 T_T

Answer 1

已经尝试过 babel-polyfill 并且不起作用:(

刚刚更新到 webpack 4 并解决了我的问题。对于很多人来说，webpack < 4 都会出现这种错误。
我会把我的 webpack 4 配置留在这里给像我一样受苦的人

webpack.config.js

const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
  entry: ["babel-polyfill", "./src/index.js"],
  resolve: {
    extensions: ['.js', '.jsx']
  },

  output: {
    publicPath: '/'
  },

  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.(png|jp(e*)g|svg)$/,
        use: [{
          loader: 'url-loader',
          options: {
            limit: 8000, // Convert images < 8kb to base64 strings
            name: 'images/[hash]-[name].[ext]'
          }
        }]
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
            options: { minimize: true }
          }
        ]
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"]
      }
    ]
  },
  devServer: {
    // host: '0.0.0.0', /******* Para ver en lan*/
    // disableHostCheck: true,/****** Para ver en lan */
    historyApiFallback: true,
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    }),
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    }),
    new CompressionPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: /\.js$|\.css$|\.html$|\.eot?.+$|\.ttf?.+$|\.woff?.+$|\.svg?.+$/,
      threshold: 10240,
      minRatio: 0.8
    })
  ]
};

package.json

"scripts": {
    "start": "webpack-dev-server --mode development --open",
    "build": "webpack --mode production"
  },
     "devDependencies": {
        "babel-core": "^6.26.0",
        "babel-loader": "^7.1.4",
        "babel-plugin-transform-class-properties": "^6.24.1",
        "babel-plugin-transform-object-rest-spread": "^6.26.0",
        "babel-plugin-transform-regenerator": "^6.26.0",
        "babel-preset-env": "^1.6.1",
        "babel-preset-react": "^6.24.1",
        "compression-webpack-plugin": "^1.1.11",
        "css-loader": "^0.28.11",
        "html-loader": "^0.5.5",
        "html-webpack-plugin": "^3.0.7",
        "mini-css-extract-plugin": "^0.2.0",
        "react": "^16.3.0",
        "react-dom": "^16.3.0",
        "url-loader": "^1.0.1",
        "webpack": "^4.2.0",
        "webpack-cli": "^2.0.12",
        "webpack-dev-server": "^3.1.1"
      },

.babelrc

{
    "presets": [
        "env",
        "react"
    ],
    "plugins": [
        "transform-object-rest-spread",
        "transform-class-properties",
        "transform-regenerator"
    ]
}