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 的区别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了JS实现Ajax的方法,结合实例形式分析了ajax的概念、原理、js实现与使用方法,需要的朋友可以参考下2016-12-12
这篇文章主要介绍了Angular 页面跳转时传参问题的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-08-08
prototype它是用Javascript写好的一些API，包括对Javascript中的类如String，Array等进行的扩充，把JS文件嵌入后直接用就行了2010-04-04
这篇文章主要给大家介绍了关于JS拆箱转换的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-02-02
JavaScript的exec()方法是在正则表达式对象上调用的方法,它用于在字符串中执行正则表达式搜索,并返回匹配的结果,本文就给大家详细的讲解JavaScript中exec()方法,感兴趣的同学跟着小编一起来看看吧2023-09-09
下面小编就为大家带来一篇js对字符串进行编码的方法总结(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
情人节将至 程序员证明自己不是直男的时候到啦 我们也有自己的专属代码浪漫。本文将介绍七个利用JavaScript实现的情人节表白特效，需要的可以参考一下2022-01-01
JS读取xml文件具体步骤为：创建DOM对象、加载xml文件(仅适用于IE)附示例代码，感兴趣的朋友可以参考下，希望对大家有所帮助2013-08-08
在JAVASCRIPT中LEFT，RIGHT，MID函数的等价函数，非常适合经常用写asp的朋友2008-06-06
JavaScript提供了一个内部数据结构，用来描述对象的属性，控制它的行为，比如该属性是否可写、可遍历等等。这个内部数据结构称为“属性描述对象”。本文主要带大家了解一下JavaScript中你必须了解的属性描述对象，需要的可以参考一下2022-12-12
最新评论