Webpack 4迁移异常：页面入口未执行主模块技术求助

我之前也碰到过类似的坑，Webpack 4在入口模块的执行逻辑上和Webpack 3有不少差异，尤其是多入口场景下很容易出现主模块代码没跑起来的情况。结合你的场景（加载vendors.js和las_dlg_projectstatus.js，但D:\MyDev\ljs_app\periscope_webpack4\build\src\modules\las_dlg_projectstatus\index.js的代码没执行），可以从这几个方向排查解决：

1. 检查入口模块的代码结构 #

Webpack 3对入口模块的顶层代码会默认执行，但Webpack 4对ES模块的处理更严格——如果你的index.js只是导出函数/对象而没有主动调用，代码就不会执行。比如：

// 原来的代码（Webpack3可能自动执行，但Webpack4不会）
export function initProjectStatus() {
  // 你的页面核心逻辑
}

改成主动执行的写法：

function initProjectStatus() {
  // 你的页面核心逻辑
}
// 主动调用执行
initProjectStatus();

// 如果需要导出供其他模块使用，也可以保留导出
export { initProjectStatus };

2. 调整Webpack的Output配置 #

Webpack 4默认的libraryTarget是var，多入口场景下可能无法确保模块被自动执行。你可以在webpack.config.js里针对入口配置library和libraryTarget，让模块挂载到全局并自动执行：

module.exports = {
  entry: {
    vendors: ['react', 'react-dom'], // 你的第三方依赖入口
    las_dlg_projectstatus: './src/modules/las_dlg_projectstatus/index.js'
  },
  output: {
    filename: '[name].js',
    // 给每个入口模块指定全局变量名
    library: '[name]',
    // 选择合适的libraryTarget，比如'window'让模块挂载到window对象
    libraryTarget: 'window',
    // 确保模块执行后返回导出内容
    libraryExport: 'default'
  }
};

3. 优化SplitChunks和RuntimeChunk配置 #

因为你用到了vendors.js，SplitChunks的配置可能影响入口模块的打包逻辑，导致主模块没有被正确加载执行。可以调整优化配置确保入口chunk的独立性：

module.exports = {
  // ...其他配置
  optimization: {
    // 单独打包runtime代码，保证模块加载顺序正确
    runtimeChunk: 'single',
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'initial'
        }
      }
    }
  }
};

4. 验证模块加载顺序 #

确保页面中vendors.js先于las_dlg_projectstatus.js加载，Webpack 4的runtime需要先加载才能正确解析后续的模块。如果加载顺序反了，也可能导致主模块无法执行。

按照上面的步骤排查后，应该能解决主模块代码不执行的问题。

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