webpack自动扣取js模块的方法

在Webpack中，自动tree-shaking节省代码体积的一个主要方法是通过UglifyJsPlugin插件在生产模式下移除死代码。为了在开发模式下也能实现类似的效果，可以使用webpack的Mode配置以及相关的插件如terser-webpack-plugin。

以下是一个简单的配置示例，展示了如何在webpack中启用tree-shaking：

const TerserPlugin = require('terser-webpack-plugin');
 
module.exports = (env, argv) => {
  return {
    // 设置模式
    mode: argv.mode === 'development' ? 'development' : 'production',
    optimization: {
      minimize: true,
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            compress: {
              // 启用内联函数
              inline: 2,
            },
          },
        }),
      ],
    },
    // 其他webpack配置...
  };
};

在这个配置中：

• mode 设置为 'development' 或 'production' 来指定当前的构建环境。
• optimization.minimize 设置为 true 来启用压缩和优化。
• optimization.minimizer 数组中包含了 TerserPlugin 实例，它会在构建过程中被调用来压缩和 mangle 代码。

确保你已经安装了 terser-webpack-plugin，如果没有，可以通过以下命令安装：

npm install terser-webpack-plugin --save-dev

在实际的项目中，Webpack 会自动识别 import 和 export 语法并进行适当的tree-shaking，无需手动介入。但是，为了确保在开发模式下也能获得类似效果，可以手动启用更加强大的压缩选项，例如内联函数的优化等。