如何强制Webpack将未被引用的函数打包进Bundle

嘿，我之前也碰到过一模一样的情况！Webpack默认的Tree Shaking机制会把没有在代码内部被引用的函数判定为“死代码”，直接从最终bundle里剔除掉——这就是你那些准备给Oracle开发用的函数没被打包的原因。给你几个实用的解决方案，按需选：

方案1：将函数挂载到全局对象（最推荐） #

把你的函数绑定到window（浏览器环境）这样的全局对象上，Webpack就能识别到这些函数是要被外部代码调用的，不会被摇掉。示例代码：

// 你的入口函数文件
export function queryOracleData(params) {
  // 你的Oracle操作逻辑
}

export function formatOracleResult(data) {
  // 结果格式化逻辑
}

// 挂载到全局，供供应商代码调用
window.queryOracleData = queryOracleData;
window.formatOracleResult = formatOracleResult;

如果是用CommonJS语法，写法类似：

function queryOracleData(params) { /* ... */ }
function formatOracleResult(data) { /* ... */ }

// 暴露到全局
module.exports = {
  queryOracleData,
  formatOracleResult
};
// 同时挂载到window
window.queryOracleData = queryOracleData;
window.formatOracleResult = formatOracleResult;

方案2：关闭Tree Shaking #

直接在Webpack配置里禁用Tree Shaking，让它打包所有代码。不过这个方法不推荐，因为会把文件里所有代码（包括可能没用的）都打包进去，增大bundle体积。配置示例：

// webpack.config.js
module.exports = {
  // ...其他配置（entry、output等）
  optimization: {
    usedExports: false, // 关闭Tree Shaking
    sideEffects: false
  }
};

方案3：使用expose-loader暴露函数 #

通过expose-loader把你的函数直接暴露到全局，适合需要更灵活控制暴露规则的场景。首先安装loader：

npm install expose-loader --save-dev

然后在Webpack配置里添加规则：

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: require.resolve('./path/to/your-functions.js'),
        use: [
          {
            loader: 'expose-loader',
            options: {
              exposes: [
                'queryOracleData',
                'formatOracleResult'
              ]
            }
          }
        ]
      }
    ]
  }
};

方案4：标记文件有副作用 #

在项目根目录的package.json里，给你的函数文件标记为“有副作用”，告诉Webpack不能对它做Tree Shaking：

{
  "sideEffects": ["./path/to/your-functions.js"]
}

额外补充：Polyfill和压缩的配置 #

• Polyfill：如果用Webpack5，推荐用core-js。先安装：npm install core-js regenerator-runtime --save，然后在入口文件顶部导入：

import 'core-js/stable';
import 'regenerator-runtime/runtime';

或者在Babel配置里设置按需导入，更节省体积：

// .babelrc
{
  "presets": [
    ["@babel/preset-env", {
      "useBuiltIns": "usage",
      "corejs": 3
    }]
  ]
}

• 压缩：Webpack5在生产环境下默认会启用TerserPlugin自动压缩代码，所以只要运行webpack --mode production就会自动生成压缩后的bundle。

要是还有具体配置细节搞不定，比如不同Webpack版本的差异，随时问！

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