2

我正在将SplitChunksPluginwebpack 应用到我的服务中。

喜欢，

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

并且出现了一些问题。在讨论这些问题之前，我将介绍我的服务的缩小结构。

  1. Web 服务带来了几个script. 例如，
<script crossorigin type="module" src="/js/global.[chunkhash].js"></script>
<script crossorigin type="module" src="/js/main.[chunkhash].js"></script>

（我正在使用menifest.json）

  1. global.js就像_
import _ from 'lodash';

Object.assign(window, { _ });
  1. main.js就像_
... other codes

_.add(10, 20); // using lodash that is assigned globally in global.js

而已。实际结构更复杂。所以，现在是问题。

  1. 当我不使用splitChunksor 设置splitChunks.chunks为async时，没有问题。但是当我将 设置为splitChunks.chunks时all，浏览器中会显示以下问题。
_ is not defined

如果我_在浏览器的控制台中输入，则_存在。

  1. 所以，为了找出发生了什么，我console.log插入global.js喜欢
import _ from 'lodash';

Object.assign(window, { _ });

console.log(_, window);

何时显示console.log日志，splitChunks.chunks = 'async'但何时不显示splitChunks.chunks = 'all'。

  1. 现在，我尝试导入所有供应商，例如
/* 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但这并不容易......而且我找不到一点线索......

这对任何答案或想法都会有很大帮助！谢谢。

4

0 回答 0