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

Question

我有几个 js 文件，我想将它们连接成一个文件，然后在该文件上使用 babel-loader，以便将 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-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;
            },
          },
        },
      ],
    }),
  ],