这里已经表明了局限性，首先定义 Title 文件：

const Title = children => {
  const title = document.createElement('h3');
  title.classList.add('title');
  title.innerHTML = children;
  return title;
};

export default Title;

使用成功

开启 optimization.usedExports 对代码进行标记。

index.js：

import Title from './Title';

webpack config：

{
    //...
  mode: 'none',
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }
          }
        ]
      }
    ]
  },
  optimization: {
      usedExports: true,
  }
}

构建结果：

此时再开启 minimize 后构建：

成功使用 tree-shaking

使用失败

如 webpack 所说，如果将模块编译为非 esModule 代码：

config:

{
    loader: 'babel-loader',
        options: {
            presets: [
                ['@babel/preset-env', {
                    modules: 'commonjs',
                }]
        ]
    }
}

将目标结果构建为 commjs，关闭 minimize 看下构建结果：

此时模块代码没有被标记，开启 minimize 再看下构建结果：

treeShaking 使用失效

webpack5-自记-03 tree-shaking

使用成功

使用失败