Chunk 不同于 entry、 output、module 这样的概念，它们对应着 Webpack 配置对象中的一个字段，Chunk 没有单独的配置字段，但却出现在 CommonsChunkPlugin（Webpack3 以前）、optimization.splitChunks（Webpack4 以后）这样的名称之中。
一堆的webpack配置教程看腻了？这里有webpack4的打包及加载机制，要不了解一下？而这一切就得从打包文件说起。
1、module：我们源码目录中的每一个文件，在 webpack 中当作module来处理（webpack 原生不支持的文件类型，则通过 loader 来实现）。module组成了chunk。
1、module：我们源码目录中的每一个文件，在 webpack 中当作module来处理（webpack 原生不支持的文件类型，则通过 loader 来实现）。module组成了chunk。 2、chunk。webpack打包过程中的产物，在默认一般情况下（没有考虑分包等情况），x 个webpack的entry会输出 x 个bundle。 3、bundle。webpack最终输出的东西，可以直接在浏览器运行的。从图中看可以看到，在抽离 css(当然也可以是图片、字体文件之类的)的情况下，一个chunk是会输出多个bundle的，但是默认情况下一般一个chunk也只是会输出一个bundle
开发环境中可使用 analyze-webpack-plugin 观察各模块的占用情况。以该项目为例：浏览器中输入 http://localhost:3000/analyze.html 可以看到如下效果:
前后端分离项目如果做成 SPA（单页面）的形式，就必然面临一个首屏加载的问题，因为默认情况下首页文件比较大，可能超过 1 MB，进而带来首页加载很慢的问题。所以我们要通过优化，来提高首页的加载速度。
对于一份同逻辑的代码，当我们手写了一个个的文件，它们无论是 ESM 还是 commonJS 或是 AMD，他们都是 module； 当我们写的 module 源文件传到 webpack 进行打包时，webpack 会根据文件引用关系生成 chunk 文件，webpack 会对这个 chunk 文件进行一些操作； webpack 处理好 chunk 文件后，最后会输出 bundle 文件，这个 bundle 文件包含了经过加载和编译的最终源文件，所以它可以直接在浏览器中运行。 一般来说一个 chunk 对应一个 bundle，比如上图中的 utils.js -> chunks 1 -> utils.bundle.js；但也有例外，比如说上图中，我就用 MiniCssExtractPlugin 从 chunks 0 中抽离出了 index.bundle.css 文件。
在前面系列文章提到，webpack 实现中，原始的资源模块以 Module 对象形式存在、流转、解析处理。
webpack 的作用是根据入口文件将源代码编译（构建、打包）成最终代码。中间经过webpack打包，打包的过程就是编译
在传统的单 chunk 打包模式下，当项目代码越来越庞大，最后会导致浏览器下载一个巨大的文件，从页面加载性能的角度来说，主要会导致两个问题:
打包一个模块 // webpack.config.js module.exports = { entry: { index: "./main.js", }, o
「本文之前发过，但是比较零散，这里我把用到的方案都汇总一下，方便大家索引，有需要的小伙伴可以收藏下方便查找。里边提到的几种方案，大家都可以对照着视频试一下」
文中部分内容参考了网上一些优秀实践以及相关的分析。引用部分将会在文中标注， 文末也将给出具体链接。
文件的hash指纹通常作为前端静态资源实现增量更新的方案之一，Webpack是目前最流行的开源编译工具之一，其强大的功能也带来很多坑（当然，大部分麻烦其实都可以在官方文档中找到答案）。 比如，在Webpack编译输出文件的配置过程中，如果需要为文件加入hash指纹，Webpack提供了两个配置项可供使用：hash和chunkhash。那么两者有何区别呢？其各自典型的应用场景又是什么？本文结合笔者工作中遇到的问题，简单记录一下以上问题的解决方案。 1. hash与chunkhash 首先我们先看一下官方文档对
在正则中也有特殊含义，匹配的是数字到非数字的边界（"123!"匹配的是3和!之间），不是数据
松哥最近正在录制 TienChin 项目视频～采用 Spring Boot+Vue3 技术栈，里边会涉及到各种好玩的技术，小伙伴们来和松哥一起做一个完成率超 90% 的项目，戳戳戳这里-->TienChin 项目配套视频来啦。 ---- TienChin 项目也是一个前后端分离项目，前后端分离项目如果做成 SPA（单页面）的形式，就必然面临一个首屏加载的问题，因为默认情况下首页文件比较大，可能超过 1 MB，进而带来首页加载很慢的问题。所以我们要通过优化，来提高首页的加载速度。 问题的解决，一般来说有这样几
就职于捷信消费金融有限公司，担任 DBA 工作。先后从事过 oracle 、mongo 、mysql 的 DBA ，以及大数据 ETL 的开发工作。对 NEWSQL 以及云原生分布式数据库具有浓厚的兴趣爱好。
三大 JavaScript 主流模块规范：CommonJS、AMD 和 ES6 Module。CommonJS 和 AMD 都未统一浏览器和客户端的模块化规范。目前 Node.js 使用 CommonJS 作为官方的模块解决方案，虽然内置的模块方案促进了 Node.js 的流行，但是也为引入新的 ES Modules（ESM）标准造成了一定的阻碍，不过 Node.js 9.0+ 已经支持 ESM 语法。
本文内容只适用于webpack v1版本，webpack v2已经修复了hash计算规则。 之前讨论了webpack的hash与chunkhash的区别以及各自的应用场景，如果是常规单页面应用的话，上篇文章提供的方案是没有问题的。但是前端项目复杂多变，应对复杂多页面项目时，我们不得不继续踩webpack的hash坑。 在进入正文之前先解释一下所谓的常规单页面和复杂多页面是什么意思。 这两个并非专业术语，而是笔者实在想不出更恰当的说法了，见谅。 1. 项目类型 1.1 常规单页面项目 常规单页面符合以下条
前两天为了优化公司的代码打包项目，恶补了很多 webpack4 的知识。要是放在几年前让我学习 webpack 我肯定是拒绝的，之前看过 webpack 的旧文档，比我们内部项目的文档还要简陋。
默认情况下，Webpack 会将所有代码构建成一个单独的包，这在小型项目通常不会有明显的性能问题，但伴随着项目的推进，包体积逐步增长可能会导致应用的响应耗时越来越长。归根结底这种将所有资源打包成一个文件的方式存在两个弊端：
webpack 4 最大的改动就是废除了 CommonsChunkPlugin 引入了 optimization.splitChunks。
webpack 是我们现阶段要掌握的重要的打包工具之一，我们知道 webpack 会递归的构建依赖关系图，其中包含应用程序的每个模块，然后将这些模块打包成一个或者多个 bundle。
前两篇的博客中提及，webpack主要作用是对 解决模块之间的依赖，把各个模块按照特定的规则和顺序组织在一起，那么我们就要对资源处理的流程有一个了解。各个流程如下：
本项目是淘系用户增长团队的一个大中台系统，单页应用，涵盖很多业务功能，运用了很多懒加载页面组件来提升性能，首屏时间 1s 左右，体验良好。然而大项目文件很多，导致构建和发布时间很长，内存占用较大。我的任务是尽可能优化与此相关的问题。
通过一个demo带你深入进入webpack@4.46.0源码的世界，分析构建原理，专栏地址，共有十篇。
虽然在前面的章节中你学会了如何使用 Webpack ，也大致知道其工作原理，可是你想过 Webpack 输出的 bundle.js 是什么样子的吗？ 为什么原来一个个的模块文件被合并成了一个单独的文件？为什么 bundle.js 能直接运行在浏览器中？ 本节将解释清楚以上问题。
这里也做了一点变更，uniapp的实现中是如下形式，main.js和页面.vue会命中同一个loader（见node_modules/@dcloudio/webpack-uni-mp-loader/lib/main-new.js），然后在这个loader里面根据是是否有resouceQuery来区别处理（显然main.js没有，而页面.vue有。
引言 本文从一个很小的前端工程说起，慢慢推导出我目前多个项目前端实践的工程结构。 为Web前端项目建工程 Web工程需要建工程吗？不是建个目录就可以开搞的吗？你一定会这么问。但事实上面对越来越复杂的前端页面逻辑，真的有必要好好组织一下前端的代码结构。同时前端代码的依赖管理、编译方式真的需要考量一下。 mkdir -p demo1 cd demo1 npm install # 回答一系列回答后，一个npm工程就建好了 创建前端源代码目录及编译后产物目录 从Java带来的习惯，我是不习惯将源代码与编译后的产物放
在平时开发中我们经常会用到Webpack这个时下最流行的前端打包工具。它打包开发代码，输出能在各种浏览器运行的代码，提升了开发至发布过程的效率。
webpack 打包分析有它就够了：webpack-bundle-analyzer
以前使用 JQuery 开发前端页面的时候，页面中引用的资源文件如js、css等，一般尾部加一个 t=[时间戳] 参数，用于防止修改不生效。现在工程化开发，使用 Webpack 编译，打包的资源文件路径里自动带有一串随机字符串，称为 hash：
其实之前都不打包的，就是 js、css 分别用对应的工具编译下，然后在 html 里引入。
打包工具的角色 所谓打包工具在web开发中主要解决的问题是： （1）文件依赖管理。毕竟现在都是模块化开发，打包工具首先就是要梳理文件之间的依赖关系。 （2）资源加载管理。web本质就是html、js和
Hash：本次打包的一个标识。 Version：使用的webpack版本 Time：本次打包耗时 Built at: 生成时间
在命令行输入webpack -h，成功就出现下图，有很多webpack命令可以看一看
使用 sentry-cli 上传 source maps 时，您需要设置构建系统以创建版本(release)并上传与该版本对应的各种源文件。要让 Sentry 对您的堆栈跟踪进行解码，请同时提供：
以下配置是在webpack 4.41.6+测试 可用于生产环境： babel-loader缓存优化 ignoreplugin noparse happyPack ParallelUglifyPlugin 不可用于生产环境的： 自动刷新 热更新 DllPlugin babel-loader的缓存优化 module: { rules: [ { test: /\.js$/, loader: 'babel-
Webpack是一个前端构建工具，本文将简要介绍它最常用的功能，并创建一个基于webpack的前端开发环境。
1 背景 相信对于每个刚接触构建的同学来说， webpack 都是难以跨越的一道坎，它凭着抽象的概念、“言简意赅” 的文档，难倒了一众英雄好汉。 由于自己平时从零手写 webpack 配置的机会比较少，所以对 webpack 里的一些配置不都是特别清楚。 最近的一个需求需要给页面资源增加 md5 版本号，我正好借着这个机会，把项目里的 webpack 配置都重新梳理了一遍。 本文对于基本的配置概念（如 entry 、 output 等）就不一一赘述了，着重介绍的是 splitChunks 和 manifes
学习Vue的时候，各类教程都会告诉我们：Vue 的特点是SPA——Single Page Application（单页应用程序）。它有着诸如：“只有第一次会加载页面, 以后的每次页面切换，只需要进行组件替换；减少了请求体积，加快页面响应速度，降低了对服务器的压力” 等等优点。
webpack4支持的一个新特性就是zero配置，不需要config，也可以打包，这对于懒癌患者很有诱惑力，但是这也意味着我们不清楚零配置发生了写什么，也不知道打包出来的文件是否符合我们的心意，全部都是佛系打包。不过作为项目的亲爹亲妈，还是要对自己的孩子负责，每个打包过程都是要可控的。本文就是详解不同mode下，webpack打包都发生了些什么事。
导语 | 若你对webpack仅仅是处于使用阶段，觉得webpack原理太杂太乱太多，但是觉得大概了解下webpack的大致原理也不错。亦或是想要了解分包优化如何进行配置呢？以及为什么webpack官方分包配置会从 CommmonsChunkPlugin演变成SplitChunksPlugin呢？我按照自己的方式，通过查阅、整理相关文档，梳理一些比较容易让大家纠结的点，让大家通过本篇文章，大概了解webpack是干了什么？ 一、webpack前生今世 （一）前端石器时代----->工业化时代 前端变迁转折
在上一篇文章 有点难的 webpack 知识点：Chunk 分包规则详解 中，我们详细讲解了 Webpack 默认的分包规则，以及一部分 seal 阶段的执行逻辑，现在我们将按 Webpack 的执行流程，继续往下深度分析实现原理，具体内容包括：
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
