Webpack为何打包未使用模块？如何仅打包已导入模块？

问题原因 #

Webpack不会自动剔除未使用的代码，核心是tree shaking（摇树优化）的生效需要满足特定条件：

• 你的代码虽然用了标准ES模块的import/export语法（这是tree shaking的前提），但默认的development（开发）模式下，Webpack为了保留完整的调试信息、避免代码压缩，会自动关闭tree shaking，所以未使用的b会被保留在打包产物里。
• 即使在生产模式下，如果没有正确声明代码无副作用，Webpack也可能不敢随意剔除未使用的导出，怕破坏代码逻辑。

解决方法 #

1. 切换到生产模式打包

这是最简单直接的方式，生产模式下Webpack会自动开启tree shaking+代码压缩，自动剔除未使用的代码。

• 配置文件方式：在webpack.config.js里设置：

module.exports = {
  mode: 'production'
};

• 命令行方式：打包时直接指定模式：

webpack --mode production

打包后你会发现产物里不再包含const b=4;这段代码。

2. 开发模式下手动开启tree shaking（仅用于调试验证）

如果想在开发模式下看到tree shaking效果，需要手动配置：

module.exports = {
  mode: 'development',
  optimization: {
    usedExports: true, // 标记未使用的导出
    minimizer: [
      new require('terser-webpack-plugin')() // 用terser剔除未使用代码
    ]
  }
};

注意：开发模式下开启会影响代码可读性和调试效率，一般不推荐。

3. 声明代码无副作用

在项目根目录的package.json里添加：

"sideEffects": false

这个配置告诉Webpack：你的代码文件没有副作用（比如修改全局变量、执行DOM操作等），可以安全地剔除未使用的导出。如果有部分文件有副作用（比如CSS文件），可以指定具体路径：

"sideEffects": ["./src/styles.css", "./src/utils/global.js"]

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