output.chunkLoading
webpack.output.chunkLoading
配置项用于指定 Webpack 如何加载异步 chunk(即按需加载的代码块)。在现代 Webpack 版本中,异步代码分割成为了非常常见的功能,chunkLoading
配置项就用于控制 Webpack 加载这些异步模块的方式。
在 Webpack 中,异步加载通常通过 import()
语法进行,当浏览器需要加载某个按需分割的 chunk 时,会通过网络请求来获取该文件,chunkLoading
配置项决定了如何发起这个请求。
output.chunkLoading
配置项可以接受以下几种值:
-
'auto'
(默认值)
Webpack 会根据当前环境自动选择合适的 chunk 加载方式。在大多数情况下,'auto'
会选择 Webpack 最适合的加载方式。 -
'jsonp'
使用 JSONP(JSON with Padding)机制加载异步 chunk。JSONP 是传统的异步加载技术,Webpack 会生成一段通过<script>
标签加载 chunk 的代码。每个 chunk 会被包装成一个函数,返回数据后调用指定的回调函数。 -
'import'
使用import()
语法进行异步模块加载。这是 Webpack 5 引入的更现代的异步加载方式,使用 ES Module 的原生import()
功能来加载 chunk。该方法通过浏览器原生支持的机制加载 JavaScript 文件,不依赖于<script>
标签。 -
'require'
使用require.ensure()
进行模块加载,这种方式属于 Webpack 4 及以前版本的旧加载方式。require.ensure()
通过动态require()
加载代码块,在 Webpack 5 中不推荐使用,但仍被支持。