Webpack 4 Tree Shaking文档示例不一致问题求助

我之前在折腾Webpack 4早期版本的时候，刚好碰到过和你一模一样的问题——明明严格照着官方示例操作，bundle里就是看不到unused harmony export square的注释。给你几个亲测有效的排查和解决步骤：

1. 确认usedExports配置未被关闭 #

Webpack 4的开发模式默认会开启usedExports（它的作用就是标记未被使用的导出），但有时候自定义配置会不小心把这个选项覆盖掉。打开你的webpack.config.js，检查optimization字段：

module.exports = {
  mode: 'development',
  optimization: {
    usedExports: true // 确保这个选项是开启的，如果没配置就加上
  },
  // ...其他配置
};

加好之后重新执行yarn run build，看看注释会不会出现。

2. 检查devtool选项是否影响注释输出 #

某些devtool的值会压缩或隐藏这类调试注释，比如cheap-module-eval-source-map（Webpack 4开发模式的默认值）。你可以暂时把devtool注释掉或者改成source-map试试：

module.exports = {
  // devtool: 'cheap-module-eval-source-map', // 先注释掉这个配置
  mode: 'development',
  // ...其他配置
};

这个调整有时候能让隐藏的注释显示出来。

3. 确保square函数真的没被使用 #

仔细检查你的入口文件和所有关联代码，确认square函数没有被直接或间接引用：

• 入口文件里有没有写import { square } from './math.js'但完全没调用它？
• 有没有其他文件导入了square，然后这个文件又被入口文件引用了？
  只要square被任何地方用到，Webpack就不会把它标记为未使用。

4. 升级Webpack到4.x稳定版本 #

你用的Webpack 4.1.1是非常早期的4.x版本，可能存在一些小bug导致注释不显示。可以尝试升级到4.x的最新稳定版（比如4.46.0），执行命令：

yarn upgrade webpack@^4.46.0

之后重新yarn install再构建，大概率能解决这个问题。

内容的提问来源于stack exchange，提问作者Trevor.Screws