问题描述
我正在将SplitChunksPlugin
的webpack应用于我的服务。
就像
...
optimization: {
splitChunks: {
chunks: 'all'
}
}
出现了一些问题。在讨论这些问题之前,我将介绍服务的精简结构。
- 该Web服务带来了服务器
script
。例如,
<script crossorigin type="module" src="/js/global.[chunkhash].js"></script>
<script crossorigin type="module" src="/js/main.[chunkhash].js"></script>
(我正在使用menifest.json
)
-
global.js
就像
import _ from 'lodash';
Object.assign(window,{ _ });
-
main.js
就像
... other codes
_.add(10,20); // using lodash that is assigned globally in global.js
就是这样。实际结构更加复杂。所以,现在是问题了。
- 当我不使用
splitChunks
或将splitChunks.chunks
设置为async
时,就没有问题。但是,当我将splitChunks.chunks
设置为all
时,浏览器中会显示以下问题。
_ is not defined
如果我在浏览器的控制台中输入_
,则_
存在。
- 因此,要想知道会发生什么,我将
console.log
插入global.js
中,就像
import _ from 'lodash';
Object.assign(window,{ _ });
console.log(_,window);
console.log
在splitChunks.chunks = 'async'
时显示日志,但在splitChunks.chunks = 'all'
时不显示日志。
- 现在,我尝试导入所有类似的供应商
/* vendors */
<script type="text/javascript" src="/js/vendors~global.[chunkhash].js"></script>
<script type="text/javascript" src="/js/vendors~main~otherjs.[chunkhash].js"></script>
/* // vendors */
<script crossorigin type="module" src="/js/global.[chunkhash].js"></script>
<script crossorigin type="module" src="/js/main.[chunkhash].js"></script>
html上面有行,但是当我在devtool中看到“网络”标签时,没有供应商的javascript文件。
我在尝试应用splitChunksPlugin
方面很费力,但这并不容易...而且我找不到一点线索...
对于任何答案或想法都会有很大帮助!谢谢。
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)