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生成全局唯一标识符（GUID,UUID）的方法
本文给大家汇总介绍了5种使用javascript实现全局唯一标识符（GUID,UUID）的方法，非常的全面，有需要的小伙伴可以来参考下2016-02-02
这篇文章主要介绍了Bootstrap里的文件分别代表什么意思及其引用方法 ,需要的朋友可以参考下2017-05-05
前几天一个同事问我如下的JavaScript代码如何理解2009-06-06
小程序开发中如何使用async-await并封装公共异步请求的方法
在平常的项目开发中肯定会遇到同步异步执行的问题，这篇文章主要介绍了小程序开发中如何使用async-await并封装公共异步请求的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-01-01
这篇文章主要介绍了JavaScript中Iterator迭代器接口和循环，迭代器是数据结构遍历的一种机制迭代器主要是提供for...of使用，更多相关内推需要的小伙伴可以参考下面文章内容2022-06-06
TypeScript 是一种强类型的超集 JavaScript,它为开发者提供了静态类型检查、代码提示以及更好的可维护性,本文将深入解析 TypeScript 装饰器,从基础概念到高级用法,逐步探讨其作用、原理以及实际应用场景,以帮助你更好地理解和利用这一功能,需要的朋友可以参考下2023-09-09
这篇文章主要为大家总结了Bootstrap Table使用心得,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
在javascript中， 理解变量的作用域以及变量提升是非常有必要的。这个看起来是否很简单，但其实并不是你想的那样，还要一些重要的细节你需要理解2013-10-10
javascript引用对象的方法代码...2007-08-08
Kibo是一个简单的用于处理键盘事件的Javascript工具库。2011-10-10
最新评论