首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

chunkFilename的Webpack用法

chunkFilename是Webpack中的一个配置选项,用于指定生成的非入口 chunk 文件的名称。

在Webpack中,chunk是指由模块组成的代码块,可以是入口 chunk(entry chunk)或非入口 chunk(non-entry chunk)。入口 chunk是由entry配置指定的模块组成的,而非入口 chunk是由Webpack根据代码分割(code splitting)策略自动生成的。

chunkFilename的用法是通过配置webpack.config.js文件中的output选项来指定非入口 chunk 文件的名称。具体的配置如下:

代码语言:txt
复制
module.exports = {
  // ...
  output: {
    // ...
    chunkFilename: '[name].[contenthash].js'
  }
};

上述配置中,[name]表示非入口 chunk 的名称,[contenthash]表示根据文件内容生成的哈希值,用于保证文件内容发生变化时,文件名也会发生变化,从而避免浏览器缓存旧文件。

chunkFilename的配置选项可以使用各种占位符来自定义生成的文件名,常用的占位符包括:

  • [id]:chunk的唯一标识符
  • [name]:chunk的名称
  • [hash]:chunk的哈希值
  • [chunkhash]:chunk内容的哈希值

chunkFilename的作用是控制非入口 chunk 文件的生成方式和名称,可以根据项目需求进行配置。例如,可以将非入口 chunk 文件生成到指定的目录中,或者使用特定的命名规则。

在实际应用中,chunkFilename的配置可以根据项目的具体需求进行调整。如果需要实现代码分割和按需加载,可以使用Webpack提供的动态导入(dynamic import)语法或插件(如SplitChunksPlugin)来生成非入口 chunk 文件。

腾讯云相关产品中,与Webpack使用相关的产品包括云函数SCF(Serverless Cloud Function)和云开发(Tencent Cloud Base)。云函数SCF可以用于部署和运行Webpack打包后的代码,而云开发提供了一整套前后端一体化的开发工具和服务,可以与Webpack结合使用来进行全栈开发。

更多关于chunkFilename的Webpack用法和配置选项的详细信息,可以参考腾讯云开发者文档中的相关章节:Webpack配置

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

webpack核心模块tapable用法解析

前不久写了一篇webpack基本原理和AST用法的文章,本来想接着写webpack plugin的原理的,但是发现webpack plugin高度依赖tapable这个库,不清楚tapable而直接去看...webpack plugin始终有点雾里看花的意思。...tapable暴露多个API,提供了多种流程控制方式,连使用都是比较复杂的,所以我想分两篇文章来写他的原理: 先看看用法,体验下他的多种流程控制方式 通过用法去看看源码是怎么实现的 本文就是讲用法的文章...,知道了他的用法,大家以后如果有自己实现hook或者事件监听的需求,可以直接拿过来用,非常强大!...的核心模块,也是webpack团队维护的,是webpack plugin的基本实现方式。

55720
  • webpack性能优化(2):splitChunks用法详解

    之前写的《webpack性能优化(0):webpack性能优化概况-优化构建速度》、《webpack性能优化(1):分隔/分包/异步加载+组件与路由懒加载》如果使用vue-cli,默认生成的vendor.js...webpack-chart:用于webpack统计的交互式饼图。webpack-visualizer:可视化并分析你的 bundle,检查哪些模块占用空间,哪些可能是重复使用的。...源于webpack有一个默认配置,这也符合webpack4的开箱即用的特性。...splitChunks.minChunks用法总结splitChunks.minChunks 表示 split 前单个非按需导入的 module 的并行数的最低下限,即某个模块的引用次数必须大于等于设置的数值...性能优化(2):splitChunks用法详解》,请注明出处:https://www.zhoulujun.cn/html/tools/Bundler/webpackTheory/8554.html

    1.7K20

    webpack性能优化(2):splitChunks用法详解

    之前写的《webpack性能优化(0):webpack性能优化概况-优化构建速度》、《webpack性能优化(1):分隔/分包/异步加载+组件与路由懒加载》如果使用vue-cli,默认生成的vendor.js...webpack-chart:用于webpack统计的交互式饼图。webpack-visualizer:可视化并分析你的 bundle,检查哪些模块占用空间,哪些可能是重复使用的。...源于webpack有一个默认配置,这也符合webpack4的开箱即用的特性。...splitChunks.minChunks用法总结splitChunks.minChunks 表示 split 前单个非按需导入的 module 的并行数的最低下限,即某个模块的引用次数必须大于等于设置的数值...性能优化(2):splitChunks用法详解》,请注明出处:https://www.zhoulujun.cn/html/tools/Bundler/webpackTheory/8554.html

    2K42

    webpack 中比较难懂的几个变量名称

    webpack中有几个比较难懂的变量名称,主要是做一个总结性的概括。 webpack 中,module,chunk 和 bundle 的区别是什么? ?...2.filename 和 chunkFilename 的区别 filename filename 是一个很常见的配置,就是对应于 entry 里面的输入文件,经过webpack 打包后输出文件的文件名。...chunkFilename hunkFilename 指未被列在 entry 中,却又需要被打包出来的 chunk 文件的名称。一般来说,这个 chunk 文件指的就是要懒加载的代码。...如果我们显式配置 chunkFilename,就会按配置的名字生成文件: { entry: { index: ".....chunkFilename 指未列在 entry 中,却又需要被打包出来的文件的名称 3.webpackPrefetch、webpackPreload 和 webpackChunkName 到底是干什么的

    2.1K10

    webpack 中最易混淆的 5 个知识点

    但是最近看了一下 webpack4 的文档,发现 webpack官网的 指南[1] 写的还不错,跟着这份指南学会 webpack4 基础配置完全不是问题,想系统学习 webpack 的朋友可以看一下。...2.filename 和 chunkFilename 的区别 filename filename 是一个很常见的配置,就是对应于 entry 里面的输入文件,经过webpack 打包后输出文件的文件名。...chunkFilename chunkFilename 指未被列在 entry 中,却又需要被打包出来的 chunk 文件的名称。一般来说,这个 chunk 文件指的就是要懒加载的代码。...一句话总结: filename 指列在 entry 中,打包后输出的文件的名称。 chunkFilename 指未列在 entry 中,却又需要被打包出来的文件的名称。.../glossary [4] 文档: https://webpack.docschina.org/configuration/output/#output-chunkfilename [5] 魔法注释(magic

    1.9K60

    webpack中动态import()打包后的文件名称定义

    动态import()打包出来文件的name是按照0,1,2...依次排列,如0.js、1.js等,有的时候我们希望打包出来的文件名是打包前的文件名称。...要实现这,需要经历3个步骤: 1.在webpack配置文件中的output中添加chunkFilename。命名规则根据自己的项目来定,其中[name]就是文件名,这一块更详细的说明请点击这里。...[hash:8].js', chunkFilename: '[name]....[hash:8].js',//动态import文件名 }, //其他代码... 2.在动态import()代码处添加注释webpackChunkName告诉webpack打包后的chunk的名称(注释中的内容很重要.../containers/MyFile`) 3.大多数情况下我们使用动态import()是通过循环来做的,这样我们就不得不引入变量了,使用[request]来告诉webpack,这里的值是根据后面传入的字符串来决定

    2.8K20
    领券