Webpack -连接文件，然后使用babel-loader

Question

我有几个JS文件，我想将它们连接成一个文件，然后对该文件使用babel加载器，以便将ES5+转换为js。

我使用MergeIntoSingleFilePlugin合并文件，但由于构建顺序的原因，babel加载器首先运行。

有没有办法先运行插件，然后在插件生成的文件上运行构建？或者你有其他的想法来实现这一点吗？

下面是我的代码：

const path = require('path');
const MergeIntoSingleFilePlugin = require('webpack-merge-and-include-globally');

module.exports = {
    mode: 'development',
    entry: './webpack-test/test.js',
    output: {
        filename: 'scripts.min.js',
        path: path.resolve(__dirname, 'webpack-test')
    },
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env']
                }
            }
        }]
    },
    plugins: [
        new MergeIntoSingleFilePlugin({
            files: {
                'test.js': [path.resolve(__dirname, 'js/*.js')],
            }
        }),
    ]
};

Answer 1

我通过运行webpack两次解决了这个问题。通过合并然后执行babel，可以减少整体代码大小。

Answer 2

我用“webpack-concat-files-plugin”解决了这个问题。

const WebpackConcatPlugin = require('webpack-concat-files-plugin');
const babel = require("@babel/core")

plugins: [
    new WebpackConcatPlugin({
      bundles: [
        {
          src: ['*.js'],
          dest: './dist/polyfills.min.js',
          transforms: {
            after: async (code) => {
              const minifiedCode = await babel.transform(code, {
                presets: ["@babel/preset-env", "minify"],
              });
              return minifiedCode.code;
            },
          },
        },
      ],
    }),
  ],