webpack中的filename 和 chunkFilename 的区别实例解析
filename
filename 是一个很常见的配置，就是对应于 entry 里面的输入文件，经过webpack打包后输出文件的文件名。比如说经过下面的配置，生成出来的文件名为 index.min.js。
chunkFilename
chunkFilename 指未被列在 entry 中，却又需要被打包出来的 chunk 文件的名称。一般来说，这个 chunk 文件指的就是要懒加载的代码。
比如说我们业务代码中写了一份懒加载 lodash 的代码：
// 文件：index.js
// 创建一个 button
let btn = document.createElement("button");
btn.innerHTML = "click me";
document.body.appendChild(btn);
// 异步加载代码
async function getAsyncComponent() {
var element = document.createElement('div');
const { default: _ } = await import('lodash');
element.innerHTML = _.join(['Hello!', 'dynamic', 'imports', 'async'], ' ');
return element;
}
// 点击 button 时，懒加载 lodash，在网页上显示 Hello! dynamic imports async
btn.addEventListener('click', () => {
getAsyncComponent().then(component => {
document.body.appendChild(component);
})
})我们的 webpack 不做任何配置，还是原来的配置代码：
{
entry: {
index: "../src/index.js"
},
output: {
filename: "[name].min.js", // index.min.js
}
}这时候的打包结果如下：
这个 1.min.js 就是异步加载的 chunk 文件。文档里这么解释：
output.chunkFilename 默认使用 [id].js 或从 output.filename 中推断出的值（[name] 会被预先替换为 [id] 或 [id].）
文档写的太抽象，我们不如结合上面的例子来看：output.filename 的输出文件名是 [name].min.js，[name] 根据 entry 的配置推断为 index，所以输出为 index.min.js；
由于 output.chunkFilename 没有显示指定，就会把 [name] 替换为 chunk 文件的 id 号，这里文件的 id 号是 1，所以文件名就是 1.min.js。
如果我们显式配置 chunkFilename，就会按配置的名字生成文件：
{
entry: {
index: "../src/index.js"
},
output: {
filename: "[name].min.js", // index.min.js
chunkFilename: 'bundle.js', // bundle.js
}
}
总结
filename 指列在 entry 中，打包后输出的文件的名称。
chunkFilename 指未列在 entry 中，却又需要被打包出来的文件的名称。
到此这篇关于webpack中的filename 和 chunkFilename 的区别的文章就介绍到这了,更多相关webpack filename 和 chunkFilename 的区别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要给大家介绍了关于Javascript如何实现对象扁平化的扁平化处理简而言之就是对对象中的对象提取出来,放在一个对象里面,形象的说就是把儿子的后代当成自己的儿子,下面相关资料,需要的朋友可以参考下2022-11-11
picker为用户提供了多个选择,用户选了其中一种,但仍是需要有东西去告诉后台用户选了什么,下面这篇文章主要给大家介绍了关于微信小程序picker选择器获取值的2种方法,需要的朋友可以参考下2023-03-03
这篇文章主要介绍了JavaScript使表单中的内容显示在屏幕上的方法,涉及javascript针对表单元素操作的相关技巧,需要的朋友可以参考下2015-06-06
Javascript 定时器调用传递参数的方法，需要的朋友可以参考下。2009-11-11
这篇文章主要介绍了微信小程序 二维码生成工具 weapp-qrcode详解,教大家如何在项目中引入weapp-qrcode.js文件，通过实例代码给大家介绍的非常详细，需要的朋友可以参考下2021-10-10
这篇文章主要为大家介绍了svg插入foreignObject无法响应事件解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-10-10
在JavaScript中，for-in和for-of是两种不同的循环结构，本文主要介绍了js中for-in和for-of的区别，具有一定的参考价值，感兴趣的可以了解一下2023-12-12
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。JSON采用完全独立于语言的文本格式，这些特性使JSON成为理想的数据交换语言2016-01-01
DOM(Document Object Model)，即“文档对象模型”。基于语义的逻辑结构，DOM将网页内的元素与内容呈现为一个清晰、易读的树状模型，下面小编把最近整理有关javascript笔记之DOM基础分享给大家，有需要的朋友可以参考下2015-08-08
这篇文章主要介绍了Javascript定义类（class）的三种方法详解,本文讲解了构造函数法、Object.create()法、极简主义法三种方法,需要的朋友可以参考下2015-03-03
最新评论