UglifyJS意外令牌:关键字«const»-Webpack 4 Babel 7

时间:2019-07-26 09:04:55

标签: javascript reactjs babeljs webpack-4 uglifyjs

我正在尝试使用uglifyjs-webpack-plugin来构建带有最小化的react应用,但是由于UglifyJS,它在生产模式下失败了。

我遇到以下错误。

  来自UglifyJs的bundle.js中的

ERROR   意外的令牌:关键字«const»[./src/utils/Constants.js:1,0][bundle.js:228154,0]

以下是我的webpack配置,可能是我缺少一些babel插件。任何帮助,将不胜感激。

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const bourbon = require('node-bourbon').includePaths;
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

const HOST = process.env.HOST || 'localhost';
const PORT = process.env.PORT || 3000;
const PROXY = `http://${HOST}:${PORT}`;

const config = {
    entry: ["core-js/stable", "regenerator-runtime/runtime", "./src/index.js"],
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'build'),
        publicPath: '/'
    },
    module: {
        rules: [{
                test: /.(jsx|js)?$/,
                exclude: [
                    path.resolve(__dirname, 'node_modules'),
                ],
                loader: 'babel-loader',
                options: {
                    "presets": [
                        [
                            "@babel/preset-env",
                            {
                                "targets": {
                                    "node": "current"
                                }
                            }
                        ],
                        "@babel/preset-react"
                    ],
                    "plugins": [
                        "@babel/plugin-syntax-dynamic-import",
                        "@babel/plugin-syntax-import-meta",
                        "@babel/plugin-proposal-class-properties",
                        ["@babel/plugin-proposal-decorators", { "legacy": true }],
                        ["@babel/plugin-proposal-class-properties", { "loose": true }],
                        "@babel/plugin-proposal-function-sent",
                        "@babel/plugin-proposal-export-namespace-from",
                        "@babel/plugin-proposal-numeric-separator",
                        "@babel/plugin-proposal-throw-expressions",
                        "@babel/plugin-proposal-export-default-from",
                        "@babel/plugin-proposal-logical-assignment-operators",
                        "@babel/plugin-proposal-optional-chaining",
                    ]
                }
            },
            {
                test: /.(css|scss|sass)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: [
                                autoprefixer(),
                            ]
                        }
                    }, 'sass-loader?includePaths[]=' + bourbon,
                ]
            },
            {
                test: /\.(png|jpg|jpeg|gif|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                use: 'url-loader?limit=10000&name=img/[hash].[ext]'
            },
            {
                test: /\.(ttf|ttc|eot|otf|woff|woff2)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                use: 'url-loader?limit=10000&name=fonts/[hash].[ext]'
            }

        ]
    },
    resolve: {
        extensions: ['.json', '.js', '.jsx', '.css'],
    },
    devtool: 'source-map',
    devServer: {
        historyApiFallback: true,
        host: HOST,
        port: PORT,
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: './css/style.css',
            chunkFilename: "[id].css"
        }),
        new webpack.LoaderOptionsPlugin({
            options: {
                postcss: [
                    autoprefixer(),
                ]
            }
        }),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery"
        }),
        new BrowserSyncPlugin({
            // browse to http://localhost:3000/ during development,
            // ./public directory is being served
            host: HOST,
            port: PORT,
            proxy: PROXY
        }),

        
        new CopyWebpackPlugin([{
                from: './*.html',
                to: './',
                context: 'public/'
            },
            {
                from: './*.ico',
                to: './',
                context: 'public/'
            },
            {
                from: './img/**/*',
                to: './',
                context: 'public/'
            },
            {
                from: './fonts/**/*',
                to: './',
                context: 'public/'
            },
            {
                from: './js/**/*',
                to: './',
                context: 'public/'
            }
        ], {
            copyUnmodified: true
        }),
    ],
    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                cache: true,
                parallel: true,
                sourceMap: true // set to true if you want JS source maps
            }),
            new OptimizeCSSAssetsPlugin({})
        ]
    },
    performance: {
        hints: false
    } // Bundle warnings
};
module.exports = config;

0 个答案:

没有答案