升级Webpack至v5.64.2后脚本无法执行，求排查方案

你的问题大概率是script-loader与Webpack 5不兼容导致的。Webpack 5对模块系统的处理逻辑和Webpack 4差异很大，旧版本的script-loader无法适配这种变化，即便打包后的代码存在，也不会被执行。

具体解决步骤： #

1. 升级script-loader到适配Webpack 5的版本 #

先卸载旧版本，安装最新版：

npm uninstall script-loader --save-dev
npm install script-loader@latest --save-dev

安装完成后重新构建项目，看看脚本是否能正常执行。

2. 替换script-loader的实现方式（如果升级后仍无效） #

如果升级script-loader后问题依旧，可以放弃使用它，改用raw-loader配合手动注入脚本的方式，更稳定且适配Webpack 5：

第一步：安装raw-loader

npm install raw-loader --save-dev

第二步：修改Webpack配置中的rules

把原来的script-loader规则替换成：

{
  test: /\.js$/,
  use: ['raw-loader'],
  exclude: [/node_modules/, XLIBS_PATH],
}

第三步：在入口文件中手动执行脚本内容

比如你的入口是./js/app-bundle，修改这个文件：

// 导入脚本内容
import scriptContent from './path-to-your-script.js';

// 创建script标签并注入到页面
const scriptTag = document.createElement('script');
scriptTag.textContent = scriptContent;
document.body.appendChild(scriptTag);

3. 另一种方案：调整output配置实现全局执行 #

如果你的脚本需要在全局作用域运行，也可以通过修改Webpack的output配置来实现，不需要依赖loader：

output: {
  filename: '[name].js',
  // 将模块暴露到window对象上
  library: '[name]',
  libraryTarget: 'window',
  // 禁用模块封装，适配全局执行逻辑
  globalObject: 'this'
}

这种方式会把打包后的脚本直接挂载到全局对象，不需要额外loader处理。

验证方法 #

修改配置后重新构建，打开浏览器控制台，检查是否有你添加的console.log输出，同时确认脚本中的逻辑是否正常触发。

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