Webpack 4 output.library 无法将对象添加到 window
Webpack 4 output.library failed to add object to window
我正在将一个项目从 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
有什么想法吗?谢谢
我认为您可能需要将 libraryExport
属性 添加到 webpack 配置的 output
对象。请参阅文档 https://webpack.js.org/configuration/output/#outputlibraryexport.
中的参考资料
我找到了问题,这是由新添加的 Webpack 4 引起的
optimization: {
splitChunks: {
chunks: 'all',
},
},
我完全忘记了。
删除它们后,它又可以工作了。
稍后我将不得不想办法让应用程序与 splitChunks
.
一起工作
如果我想通了,我会post回来。
我正在将一个项目从 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
有什么想法吗?谢谢
我认为您可能需要将 libraryExport
属性 添加到 webpack 配置的 output
对象。请参阅文档 https://webpack.js.org/configuration/output/#outputlibraryexport.
我找到了问题,这是由新添加的 Webpack 4 引起的
optimization: {
splitChunks: {
chunks: 'all',
},
},
我完全忘记了。
删除它们后,它又可以工作了。
稍后我将不得不想办法让应用程序与 splitChunks
.
如果我想通了,我会post回来。