Webpack 4 output.library 无法将对象添加到窗口答案

【问题标题】：Webpack 4 output.library failed to add object to windowWebpack 4 output.library 无法将对象添加到窗口
【发布时间】：2020-07-28 17:52:20
【问题描述】：

我正在将一个项目从 Webpack 3 升级到 Webpack 4。

目前我在 /my-proj/apps/myApp1/wrappers/clientWrapper.js 有一个文件

export default {
  a: 1,
  b: 2,
};

Webpack 客户端配置：

entry: {
  index: [
    'core-js/modules/es6.symbol',
    'regenerator-runtime/runtime',
    'core-js/fn/object/assign',
    'core-js/fn/object/values',
    'core-js/fn/object/entries',
    'react-hot-loader/patch',
    'webpack-hot-middleware/client?reload=true&path=http://0.0.0.0:3000/__webpack_hmr',
    '/my-proj/apps/myApp1/wrappers/clientWrapper.js'
  ]
},
output: {
  path: '/my-proj/build/client',
  filename: '[name].js',
  chunkFilename: '[name]-[chunkhash].js',
  library: [ 'myApp1', '[name]' ],
  libraryTarget: 'umd',
  publicPath: 'http://0.0.0.0:3000/client/'
}
// ...

Webpack 服务器配置：

entry: {
  index: [
    '/my-proj/apps/myApp1/wrappers/serverWrapper.js'
  ]
},
output: {
  path: '/my-proj/build/server',
  filename: '[name].js',
  chunkFilename: '[name]-[chunkhash].js',
  library: [ 'myApp1', '[name]' ],
  libraryTarget: 'commonjs2',
  publicPath: 'http://0.0.0.0:3000/client/'
}
// ...

由于在这种情况下[name] 的值将是index，所以通过Webpack 的output.library，

以上配置可以帮助将对象添加到window.myApp1.index。

有关此方式的更多信息，您可以查看

客户端浏览器控制台现在将打印

window.myApp1.index.default = {
  a: 1,
  b: 2,
}

截图给window.myApp1：

但是，升级到 Webpack 4 后，使用相同的 Webpack entry 和 output 配置，无法将对象添加到 window.myApp1.index：

window.myApp1.index = undefined

有什么想法吗？谢谢

【问题讨论】：

如果您记录，window.myApp1 上存在哪些属性？
嗨@EvanMorrison 感谢您的帮助，它只有一个字段index，我还在问题中添加了屏幕截图。

标签： javascript webpack webpack-4

【解决方案1】：

我认为您可能需要将 libraryExport 属性添加到 webpack 配置的 output 对象。请参阅文档https://webpack.js.org/configuration/output/#outputlibraryexport 中的此参考。

【讨论】：

谢谢@EvanMorrison 我尝试将libraryExport: 'default' 添加到output。现在我得到了Uncaught TypeError: Cannot read property 'default' of undefined，而window.myApp1 现在是{}。并且还尝试根据该文档同时将客户端或服务器或两者的output.libraryTarget 设置为'var'，仍然得到相同的结果。
抱歉没有帮助。 libraryExport 可能需要模块的路径，我可能会尝试 libraryExport: [ '[name]', 'default' ] 。如果这不起作用，请查看输出包，也许这会为正在发生的事情提供线索。
谢谢@EvanMorrison！仍然没有运气。是的，我会进一步挖掘。
嗨@HongboMiao，这个运气好吗？我们目前在我们的代码库中遇到了这个问题，当优化到位时，窗口无法分配给任何对象。
@FranGarcía 在那一刻我最终得到了stackoverflow.com/a/63162769/2000548，基本上只是删除了那部分。

【解决方案2】：

我找到了问题，是新添加的 Webpack 4 引起的

optimization: {
 splitChunks: {
   chunks: 'all',
 },
},

我完全忘记了。

删除它们后，它会再次起作用。稍后我将不得不想办法让该应用与splitChunks 一起工作。

如果我知道了，我会回帖。

【讨论】：