Question

我正在尝试使用Uglifyjs缩小我的项目，但出现错误Unexpected token：name（扩展名）。问题似乎与转码有关，但我已经为此使用了babel。作为参考，您可以从我的repository访问带有复制错误的项目。否则，这也是我的webpack配置和.babelrc文件的摘要：

const webpack = require('webpack');
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const WorkboxPlugin = require('workbox-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); 

const webcomponentsjs = './node_modules/@webcomponents/webcomponentsjs';

const polyfills = [
    //Webcomponents polyfill applied in the index.html
    {
        from: path.resolve(`${webcomponentsjs}/webcomponents-*.{js,map}`),
        to: path.join(__dirname, 'wwwroot'),
        flatten: true
    },

        {
            from: path.resolve(`${webcomponentsjs}/custom-elements-es5-adapter.js`),
            to: path.join(__dirname, 'wwwroot'),
            flatten: true
        },
];

module.exports = function (env) {
    return {
        mode: 'development',
        devtool: 'inline-source-map',
        entry: './src/index.js',
        output: {
            publicPath: '/',
            path: path.resolve(__dirname, 'wwwroot'),
            filename: "[name].[contenthash].js",  
            chunkFilename: '[name].[contenthash].js',
        },

        optimization: {
            splitChunks: {
                cacheGroups: {
                    vendor: {
                       test: /[\\/]node_modules[\\/]/,
                       name: 'vendors',
                       chunks: 'all'
                    }
                }
            },
            runtimeChunk: 'single',
            minimize: true,
            minimizer: [
                 new UglifyJsPlugin()
             ],
             usedExports: true,
             sideEffects: false
        },

        module: {
            rules: [
                {
                    test: /\.js$/,
                   //exclude: /node_modules/,
                    use: {
                        loader: 'babel-loader',  
                    }
                },
                {
                    "test": /\.html$/,
                    "use": [{
                        loader: 'html-loader',
                    }]
                }
            ]
        },

        resolve: {
            modules: [
                "node_modules",
                path.resolve(__dirname, "src")
            ],
            extensions: [".js", ".json"],
        },

        plugins: [
            new webpack.HashedModuleIdsPlugin(),
            new HtmlWebpackPlugin({
                template: 'src/index.html'}),
            new CleanWebpackPlugin(['wwwroot']),
            new CopyWebpackPlugin([...polyfills]),
        ],

    }
};

这是我的.babelrc文件：

{
    "presets": [
        [
        "@babel/preset-env",
        {
            "targets": {
            "browsers": [ "last 2 versions", "ie >= 11" ]
            },
            "exclude": [ "transform-classes" ]
        }
        ]
    ],
    "plugins": [
        "@babel/plugin-proposal-class-properties",
        "@babel/plugin-proposal-object-rest-spread",
        "@babel/plugin-syntax-dynamic-import"
    ]
}

Answer 1

好吧，我没有设法修复UglifyJS，但是另一种解决方案是切换到Terser进行缩小，根据其documentation的说法，Webpack默认使用它。我在问题中发布的我的存储库中的link已变成Polymer 3 Webpack样板代码。如果有人碰巧知道UglifyJS的问题所在，那仍然是一个更有效的答案。

来自UglifyJs Webpack插件的错误-意外令牌：名称（扩展）

1 个答案: