Webpack打包文件生成正常但HTML页面加载后无法生效

核心问题分析 #

Webpack默认会将所有代码包裹在模块作用域中，原来直接引用时的全局变量（如jQuery、$、AOS、Modernizr）不会自动暴露到window对象上，而你的依赖库（slick、jquery.mask）和自定义脚本大概率依赖这些全局变量，导致打包后无法正常运行。另外，入口文件的依赖顺序、脚本加载时机也可能是诱因。

具体解决方案 #

1. 暴露全局变量给window #

针对依赖全局变量的库，使用expose-loader将其挂载到window，确保页面和其他模块能访问到：

步骤1：安装依赖

npm install expose-loader --save-dev

步骤2：修改Webpack配置

在module.rules中添加以下规则：

module.exports = {
  // ... 其他配置
  module: {
    rules: [
      // 原有babel-loader规则
      {
          test: /\.js$/,
          exclude: /(node_modules)/,
          use: {
              loader: 'babel-loader',
              options: {
                  presets: ['@babel/preset-env']
              }
          }
      },
      // 暴露jQuery到window
      {
        test: require.resolve('jquery'),
        loader: 'expose-loader',
        options: {
          exposes: ['$', 'jQuery', 'window.jQuery'],
        },
      },
      // 暴露AOS到window
      {
        test: require.resolve('./src/assets/js/libraries/aos.js'),
        loader: 'expose-loader',
        options: {
          exposes: 'AOS',
        },
      },
      // 暴露Modernizr到window
      {
        test: require.resolve('./src/assets/js/scripts/modernizr-3.11.2.min.js'),
        loader: 'expose-loader',
        options: {
          exposes: 'Modernizr',
        },
      }
    ]
  }
}

2. 自动注入依赖（可选） #

如果不想在每个模块里手动import依赖，可以用webpack.ProvidePlugin自动注入，让模块内直接使用$、jQuery等变量：

修改Webpack配置

const webpack = require('webpack'); // 顶部引入webpack

module.exports = {
  // ... 其他配置
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery',
      AOS: 'aos'
    })
  ]
}

注：ProvidePlugin主要解决模块内的依赖注入，如果页面有直接依赖window上变量的代码，还是需要配合expose-loader使用。

3. 检查入口文件顺序 #

确保依赖库在自定义脚本之前加载，当前入口数组的顺序是合理的，但要确认jQuery确实被正确引入（控制台显示已打包jquery，说明某个库已经import了它，但如果是全局依赖，还是需要暴露到window）。

4. 验证脚本加载时机 #

确保HTML中bundle.js的引用位置和原来单独引用脚本的位置一致，比如原来放在</body>前，现在也保持这个位置，避免DOM未加载完成时脚本执行找不到元素。

5. 查看浏览器控制台错误 #

打开浏览器开发者工具（F12）的Console面板，查看是否有xxx is not defined这类错误，这能直接定位是哪个变量未被正确暴露。

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