如何配置webpack tree shaking排除指定自定义构造函数及方法？

问题根因补充 #

你当前代码存在两处基础问题需要先修复：

1. 箭头函数没有自身的this绑定，也无法通过new调用，直接执行new Abc()会抛出Abc is not a constructor错误，建议先修改为普通函数：

(() => {
    // 改为普通函数作为构造器
    const Abc = function(ab) {
        this.ab = ab;
        this.k = () => {
            console.log(this.ab);
        };
    };
    window.MySpace = window.MySpace || {};
    window.MySpace.abc = new Abc('some var');
})();

2. 挂载的命名空间是window.MySpace（S大写），调用时如果写成window.Myspace（S小写）也会抛出未定义错误，注意大小写保持一致。

Tree Shaking 排除配置方案 #

Tree Shaking会被触发的核心原因是webpack识别到这段代码/所在文件被标记为无副作用，且内部导出的成员没有被其他模块显式引用，所以会被删除，你可以通过以下任意一种方法解决：

方案1：配置sideEffects标记副作用文件（推荐） #

sideEffects是webpack识别文件是否有副作用的核心依据，只要标记对应文件存在副作用，webpack就会完全保留该文件的所有代码，不会做Tree Shaking。
你可以选择以下任意一种配置方式：

• 方式一：在项目根目录package.json中添加配置，指定你存放这段代码的文件路径：

{
  "name": "your-project",
  // 数组中填入你的目标文件相对路径，支持glob匹配
  "sideEffects": ["./src/utils/your-file-name.js"]
}

• 方式二：在webpack.config.js的模块规则中配置：

module.exports = {
  // 其他webpack配置项
  module: {
    rules: [
      {
        // 匹配你存放这段代码的文件
        test: /your-file-name\.js$/,
        sideEffects: true
      }
    ]
  }
}

方案2：通过魔法注释标记导入副作用 #

如果你是在其他入口文件中导入这段挂载代码，可以在导入语句处添加注释标记，告诉webpack该导入存在副作用，不要删除：

// 放在导入语句末尾即可
import './utils/your-file-name.js' /* webpack side effect */

方案3：全局关闭Tree Shaking（不推荐） #

如果不需要整个项目的Tree Shaking能力，可以直接在webpack配置中关闭优化项：

module.exports = {
  // 其他webpack配置项
  optimization: {
    usedExports: false
  }
}

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