【实战-解决方案】Webpack 打包后很多js方法报错：not defined

问题分析

在不打包的情况下，方法（如 checkLoginStatus、filterSites、initProgressBar 等）可以正常运行，而经过 Webpack 打包后报 is not defined 错误，通常有以下几个可能的原因：

1. 全局变量丢失

   • 在 Webpack 打包时，默认使用 模块作用域（strict mode），不会自动将定义的函数暴露到 window 全局作用域。
   • 在不打包的情况下，脚本文件直接在 HTML 里引入，函数自然处于全局作用域中。

2. tree shaking 误删除

   • Webpack 在 production 模式下会进行 Tree Shaking（去除未使用的代码），如果某些方法在代码中未直接使用，可能被误删除。

3. 代码拆分后加载顺序问题

   • 如果 main.bundle.js 在执行某些 window.onload 事件前加载，可能导致 is not defined 错误。

4. 模块导出方式错误

   • 如果代码原来使用的是 script 直接定义函数，而 Webpack 期望使用 import/export 组织代码，导致找不到方法。

解决方案

针对不同情况提供多个方案：

方案 1：手动将函数挂载到 window

如果你希望这些方法依然可以全局调用，需要显式地将方法挂载到 window，在定义方法的 JS 文件中修改：

// 原来可能是这样
function checkLoginStatus() {
    console.log("Checking login status...");
}

// 需要改成这样
window.checkLoginStatus = function () {
    console.log("Checking login status...");
};

所有方法都按照此方式修改，确保在 window 作用域下能找到。

方案 2：使用 exports 或 module.exports（适用于 ES6 模块）

如果你已经在使用 Webpack 的 import/export 方式组织代码，则需要在 main.js 里正确导出：

export function checkLoginStatus() {
    console.log("Checking login status...");
}

在其他文件引用：

import { checkLoginStatus } from './utils.js';
checkLoginStatus();

如果是 CommonJS 语法：

module.exports = {
    checkLoginStatus
};

然后 require 方式引入：

const { checkLoginStatus } = require('./utils');
checkLoginStatus();

方案 3：检查 Webpack tree shaking

如果 Webpack 误认为某些方法未使用，可以在 webpack.config.js 里关闭 tree shaking：

module.exports = {
    optimization: {
        usedExports: false
    }
};

或者确保函数确实被调用，不会被 Webpack 认为是“死代码”：

export function checkLoginStatus() {
    console.log("Checking login status...");
}

// 确保代码里至少调用一次
checkLoginStatus();

方案 4：确保 Webpack 按顺序加载

有时候 Webpack 会将代码分块（code splitting），导致某些方法未定义。可以在 webpack.config.js 里调整 splitChunks 选项：

module.exports = {
    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    }
};

或者在 HTML 里确保 bundle.js 作为 defer 加载：

<script src="main.bundle.js" defer></script>

总结

尝试 方案 1 先解决大部分问题，如果你希望使用 ES6 模块化，再尝试 方案 2 和 方案 3。

有没有更简单的方案，改动最少能修复这个问题？

如果你想改动最少就能修复 is not defined 的问题，可以采用最简单的方案—— 直接在 Webpack 配置中自动把函数挂载到 window，无需修改源代码。

最简单方案

在 webpack.config.js 里添加 output.library 配置：

module.exports = {
  output: {
    filename: 'main.bundle.js',
    path: path.resolve(__dirname, 'dist'),
    library: 'MyLib',  // 这个名字随意，但要唯一
    libraryTarget: 'window',  // 让所有导出的内容都挂载到 window
  }
};

然后，在代码最外层加上：

window.MyLib = {
  checkLoginStatus,
  filterSites,
  initProgressBar,
  openCategoryTag,
  closeAllMenus
};

这样所有的函数都会自动挂载到 window.MyLib，你可以直接这样调用：

MyLib.checkLoginStatus();

或者直接修改 library：

module.exports = {
  output: {
    filename: 'main.bundle.js',
    path: path.resolve(__dirname, 'dist'),
    library: '', // 直接挂载到 `window`
    libraryTarget: 'window'
  }
};

这样，你原本直接调用 checkLoginStatus() 的代码就可以正常运行，不需要改动 HTML 或 JS 代码。

优点

✅ 不需要修改源码（避免手动 window.checkLoginStatus = function ()）
✅ 只改 webpack.config.js 一行代码
✅ 适用于所有全局函数

这样就能保证所有方法在 Webpack 打包后仍然能被全局访问