CODEWITHSUNDEEP
javascriptwebpackwebpacker
Rares Pop
Rares Pop

Reputation: 55

Webpack - concatenate files then use babel-loader

I have few js files that I want to concatenate them into a single file and then use the babel-loader on that file so the ES5+ to be transpiled into JS.

I used MergeIntoSingleFilePlugin to merge the files, but the babel loader runs first because of the build order.

Is there anyway to run the plugin first and then run the build on the file produced by the plugin? Or do you have other idea how to achieve that?

Here is my code:

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')],
            }
        }),
    ]
};

Upvotes: 3

Views: 1516

Answers (2)

Александр Зацарный
Александр Зацарный

Reputation: 21

I solved it with '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;
            },
          },
        },
      ],
    }),
  ],

Upvotes: 2

Dhruvesh Parikh
Dhruvesh Parikh

Reputation: 1

I solved this by running the webpack twice. By merging and then executing babel, the overall code size is reduced.

Upvotes: 0

Related Questions