Webpack开发模式下首次加载页面缺失login.js脚本问题求助

问题现象 #

首次加载login页面时，仅加载包含bootstrap js/css和toastr css的shared.js bundle，login.js未加载；刷新页面后所有资源加载正常，每次重启本地服务器都需刷新登录页才能登录。生产模式下无此问题，项目基于Node 16.17/Expressjs 4构建，Webpack配置如下：

export default {
  entry: {
    shared: [
      './src/3rdparty/bootstrap/bootstrap.min.js',
      './src/3rdparty/bootstrap/bootstrap.min.css',
      './src/3rdparty/toastr/toastr.min.css',
      ],
    login : {
      import: './src/pages/login.js',
      filename: 'main/login.js',
      dependOn: 'shared',
      chunkLoading: false,
    }
  },
  output:{
    path: fileURLToPath(new URL('public',import.meta.url)),
    clean:true,
  },
  resolve:{
    extensions: ['.js']
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    })
  ],
  mode: 'development'
}

问题原因 #

开发模式下Webpack的模块加载机制与生产模式存在差异：

• chunkLoading: false配置会禁用Webpack的chunk加载逻辑，而login入口依赖shared，首次启动时Webpack无法正确生成并注入login.js的加载触发逻辑，刷新后浏览器缓存了shared资源，才会触发login.js的加载。
• 开发模式默认启用的模块缓存可能导致入口解析不及时，重启服务器后首次加载拿不到最新的入口映射。

解决方案 #

1. 移除chunkLoading: false配置 #

修改login入口的配置，删除chunkLoading: false：

login : {
  import: './src/pages/login.js',
  filename: 'main/login.js',
  dependOn: 'shared',
}

开发模式下不需要禁用chunk加载，这个配置更适合生产模式下的静态chunk输出，移除后Webpack会正确处理依赖关系，自动注入login.js的加载逻辑。

2. 确保HTML中正确引入所有脚本 #

如果没有使用HtmlWebpackPlugin自动注入bundle，需要手动在login页面的HTML中按顺序引入两个脚本：

<script src="/shared.js"></script>
<script src="/main/login.js"></script>

注意必须保证shared.js在前，因为login.js依赖它。

3. 禁用Webpack开发模式缓存 #

在Webpack配置中添加缓存禁用配置，避免模块解析缓存导致的入口异常：

export default {
  // ...其他配置
  cache: false,
  // 或者更精细地配置：
  // cache: {
  //   type: 'filesystem',
  //   buildDependencies: {
  //     config: [__filename],
  //   },
  //   store: 'pack',
  //   version: '1.0',
  // }
}

4. 调整Express静态文件缓存策略 #

开发模式下关闭静态资源缓存，避免浏览器加载旧的bundle：

app.use(express.static('public', {
  maxAge: 0,
  etag: false,
  lastModified: false
}));

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