Webpack生产模式下如何保留deprecated.js中函数名并压缩代码

Hey there, I’ve run into this exact issue before—when Webpack minifies code in production mode, it renames those deprecated functions, which breaks backward compatibility for users still relying on them. Let’s go through two reliable solutions to keep those function names intact while still compressing the rest of your code.

Solution 1: Configure Terser to Reserve Specific Function Names #

Webpack uses the Terser plugin by default for minification in production. You can tell Terser to skip renaming your deprecated function names by adding them to the reserved list in the plugin’s config.

For Webpack 5, Terser is included out of the box—no extra installation needed. If you’re on an older version, install it first with npm install terser-webpack-plugin --save-dev.

Update your Webpack config like this:

const TerserPlugin = require('terser-webpack-plugin');
const path = require('path');

module.exports = { 
  name: "front", 
  mode: "production", 
  context: path.resolve(__dirname, 'src'), 
  entry: [ 
    './jquery/photoswipe.addon_offer_and_order.min.js', 
    './jquery/photoswipe.min.js', 
    './jquery/photoswipe-ui-default.min.js', 
    './deprecated.js', 
    './index.js', 
  ], 
  output: { 
    filename: "index.min.js", 
    path: path.resolve(__dirname, 'dist') 
  }, 
  optimization: { 
    moduleIds: 'named',
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          mangle: {
            // Add all your deprecated function names here
            reserved: ['updateSearchCharacteristic', 'moveBlockAnfrageGuest']
          }
        }
      })
    ]
  } 
};

This tells Terser to leave those specific function names untouched, so users calling the old functions will still see the deprecation warning and get the correct return value.

Solution 2: Explicitly Attach Functions to the Global Object #

If your deprecated functions are meant to be available globally (e.g., on the window object), you can explicitly assign them to window in your deprecated.js file. Terser doesn’t mangle global object properties by default, so this will preserve the function names.

Modify your deprecated.js like this:

window.updateSearchCharacteristic = function updateSearchCharacteristic(url, category_id) { 
  console.warn("This method is deprecated please use shopSearch.updateCharacteristic()"); 
  return shopSearch.updateCharacteristic(url, category_id); 
}; 

window.moveBlockAnfrageGuest = function moveBlockAnfrageGuest() { 
  console.warn("This method is deprecated please use shopUser.moveOrderAndOfferLinkForGuest()"); 
  return shopUser.moveOrderAndOfferLinkForGuest(); 
};

Now when users call updateSearchCharacteristic() (or window.updateSearchCharacteristic()), the function name remains intact, and the deprecation warning will fire as expected.

Which Solution Should You Choose? #

• Use Solution 1 if you want precise control over which function names are preserved, especially if the functions aren’t global.
• Use Solution 2 if the deprecated functions are global—it’s simpler and avoids modifying your Webpack config beyond what you already have.

内容的提问来源于stack exchange，提问作者Richard