Search code examples
webpackbabeljs

Minify while keeping function names with webpack and babel


I'm trying to stop the minification happening between babel and webpack from renaming my functions. I came across this but apparently don't have the right options set up.

Here's my webpack config file. What do I need to change to make it keep my function names?

const path = require('path');
const MinifyPlugin = require('babel-minify-webpack-plugin');

module.exports = {
    entry: {
        translate: ["@babel/polyfill", "./Scripts/es6/translate.js"],
        setupForm: ["./Scripts/es6/setupForm.js"],
        prelimForm: ["./Scripts/es6/prelimForm.js"],
        recruiters: ["./Scripts/es6/recruiters.js"]
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, './Scripts/build'),
    },
    plugins: [
        new MinifyPlugin({
            "keepFnName": true
        }, {})
    ],
    module: {
        rules: [{
            loader: 'babel-loader',
            test: /\.js$/,
            exclude: /node_modules/,
            query: {
                presets: ['@babel/preset-env']
            }
        }]
    }
}

Solution

  • It is terser-webpack-plugin job to minify the html, you can pass to it keep_fnames: false.

    module.exports = {
      optimization: {
        minimizer: [
          new TerserPlugin({
            terserOptions: {
              keep_fnames: true,
            },
          }),
        ],
      },
    };