Webpack：自定义加载程序和插件顺序

Question

我是webpack 4的新手，我想知道如何为加载程序和插件设置特定的顺序。

实际上，我想将一个ES6打字稿项目捆绑到ES5，并将其最小化以用于生产用途，包括属性名称。为此，我定义了以下加载程序：

{
    test: /\.ts?$/,
    include: paths.appSrc,
    exclude: /node_modules/,
    use: [{
            loader: 'babel-loader',
            options: {
                presets: ['@babel/preset-env']
            }
        },
        {
            loader: 'ts-loader',
            options: {
                transpileOnly: true,
                configFile: path.resolve(__dirname, "./tsconfig.prod.json")
            }
        }
    ]
}

我正在使用uglifyjs webpack插件来缩小代码

optimization: {
    minimize: true,
    minimizer: [
        new UglifyJsPlugin({
            uglifyOptions: {...},
            sourceMap: true
        })
    ]
}

因此，此配置过程为

1. ts-loader：Typescript（ES6）-> Javascript（ES6）
2. 小型装载机： Javascript（ES6）-> Javascript（ES5）
3. uglifyjs：最小化 Javascript（ES5）

babel-loader在步骤2）中创建此功能

function _createClass(Constructor, protoProps, staticProps) {
  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
  if (staticProps) _defineProperties(Constructor, staticProps);
  return Constructor;
}

并像这样使用它

_createClass(myComponent, [{
      key: "AddElement",
      value: function AddElement() {
        var element = document.createElement("div");
        element.innerHTML = "Hello webpack";
        document.body.appendChild(element);
      }
}]);

代码在ES5中表示一个名为“ myComponent”的ES6类，其功能为“ AddElement”。问题在于函数名称设置为字符串，而uglifyjs无法识别该名称。因此，当我配置uglifyjs来修饰属性名称时，代码也会失败。

现在，我想也许可以更改加载程序/插件的顺序。如果订单像这样，那就没问题

1. ts-loader
2. uglifyjs
3. babel-loader

是否可以为webpack 4中的加载程序和插件设置自定义顺序？