webpack打包的困惑( babel 与 UglifyJsPlugin 执行先后顺序)

Question

我按照typescript中文网给出的 webpack 配置，配置了一下我的项目的 loader 部分。

    module: {
        rules: [
            // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
            { test: /\.tsx?$/, loader: "awesome-typescript-loader" },

            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
            { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
        ]
    },

此外，我还配置了 UglifyJsPlugin 压缩代码。
UglifyJsPlugin不支持ES6语法，因而打包报错，所以又引入了 babel 。
看到上面给出的示例指出
所有输出的 .js 文件都会由source-map-loader进行处理。所以我直接加入如下配置。心想，输出的.js由babel-loader也处理一遍，UglifyJsPlugin就可以识别了

{
    test: /\.js$/,
    exclude: /node_modules/,
    loader: "babel-loader"
},

代码压缩部分如下:

    optimization: {
        minimizer: [
            // https://github.com/webpack-contrib/uglifyjs-webpack-plugin#uglifyoptions
            new UglifyJsPlugin({
                uglifyOptions: {
                    warnings: false,
                    parse: {},
                    compress: {},
                    mangle: true,
                    output: null,
                    toplevel: false,
                    nameCache: null,
                    ie8: false,
                    keep_fnames: false,
                    drop_console: true,
                    parallel: true,
                    sourceMap: true,
                },
            }),
        ],
    },

但是打包时还是会报 UglifyJsPlugin不支持ES6语法的错误。我的困惑在于，UglifyJsPlugin肯定压缩的是打包后的js文件，但打包后的js文件不是已经先由source-map-loader 和 babel-loader 处理吗?那为什么还会报错呢?

报错如下:

将 babel-loader 写到 tsx 里就没这个问题。

Answer 1

babel-loader忽略了node_modules，在node_modules里面可能有一些插件仍然还有es6的写法，所以导致压缩报错了。

可以给出更多报错信息来判断。

另外最新版里面支持es编译了,https://www.webpackjs.com/plu...