大家好我是来蹭饭，一个会点儿吉他和编曲，绞尽脑汁想傍个富婆的摸鱼大师。这是咱们Webpack大白话系列的第二篇文章，用大白话跟你唠明白如何优化Webpack。万字加多图，客官里边请。

前言 持久性缓存来提高构建性能 在webpack 5之前，webpack是没有提供持久化缓存，我们开发的时候需要使用类似 cache-loader 来做缓存方面的处理。

大家好，我叫小杜杜，相信大家都知到我们代码有开发模式和打包模式，作为一个React前端，我们一帮用jsx、tsx来书写代码，际上浏览器识别不了这些文件，那如何让浏览器识别这些文件呢？

2022年，rollup是非常值得学习的构建工具。但是官方文档关于插件的介绍实在过于简略，春哥带你搞定！

在上一篇中，介绍了 webpack 的 entry 、 output 、 plugins 属性。 在这一篇，接着介绍其它配置属性。 搭建的 工程化 代码基本都无法直接运行在浏览器，所以本地测试也都是使用打包编译后的代码预览。 但是本地开发预览又必须具有代码可读性、可调试性等条件…

前段时间在某个项目进行需求开发的时候，该项目是基于 webpack3 进行打包构建的。在开发过程中我发现打包很慢，开发体验不佳，于是做了简单的优化并梳理了优化方案 进行优化的第一步需要知道我们的构建到底慢在那里。通过 speed-measure-webpack-plugin 测…

下面是公司搭建的真实项目开发环境我提炼出来比较重要的一些知识点作为内部技术分享。 打包成功后，会在项目的根目录自动创建一个 dist 文件夹，里面的 main.js 文件就是我们打包后的文件。 注意：若不想将配置写在配置文件中，可在项目根目录创建 babel.config.js…

1. 前言（需求） 就是想读取 *.vue 文件的源码并高亮展示到页面上，又不想用第三方的依赖（其实是找不到）。 2. 实现思路 通过 vue-loader 自定义块 功能，获取目标文件的文件路径，然后通过 fs 读取源码，再用 @vue/compiler-core 的 API…

webpack在前端化过程中十分重要，所以花了一段时间学习webpack，以及webpack4新特性，本文是按照从易到难的过程，梳理部分webpack概念，常见的loader，plugins，webpack4新特新，还有部分高级概念。 Output: 如何命名输出文件，以及输出…