我按照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 里就没这个问题。