下一代打包工具，这是rollup对自己的定位。如今的前端领域，构建工具并不缺少，每个前端工程师都用过或者听过webpack。可以看到的是像React、Vue等框架的构建工具使用的都是rollup。既然如此，这些框架为什么会选择rollup？它的特性是什么？面对不同场景，我们要怎…

上一篇教程中，为大家介绍了rollup.js的入门技巧，没有读过的小伙伴可以点击这里，本次我们将继续对rollup.js的进阶技巧进行探讨，想直接看结论的小伙伴可以直接看最后一章。 rollup.js的插件采用可拔插设计，它帮助我们增强了rollup.js的基础功能，下面我将重…

本篇为 从零开始配置 react + typescript 系列第三篇，将带大家完成模板项目的 webpack 配置。整个项目的配置我力求达到以下目标： 灵活： 我在配置 eslint 是选择使用 js 格式而不是 json，就是为了灵活性，使用 js 文件可以让你使用导入其它…

前2篇文章：webpack loader详解1和webpack loader详解2主要通过源码分析了 loader 的配置，匹配和加载，执行等内容，这篇文章会通过具体的实例来学习下如何去实现一个 loader。 这里我们来看下 vue-loader(v15) 内部的相关内容，这…

下面是一个使用脚手架来初始化项目的典型例子。 随着前端工程化的理念不断深入，越来越多的人选择使用脚手架来从零到一搭建自己的项目。其中大家最熟悉的就是create-react-app和vue-cli，它们可以帮助我们初始化配置、生成项目结构、自动安装依赖，最后我们一行指令即可运行…

一. 什么是Tree-shaking 上图形象的解释了Tree-shaking 的本意，本文所说的前端中的tree-shaking可以理解为通过工具"摇"我们的JS文件，将其中用不到的代码"摇"掉，是一个性能优化的范畴。具体来说，在 webpack 项目中，有一个入口文件，相当…

在老袁写这篇文章的时候，v5版本仍然处于早期阶段，可能仍然有问题。而且作为一个major版本，其中有一些breaking changes，可能会导致一些配置和插件不工作。但这并无妨碍我们去开始对changelog上的新特性进行尝鲜实战。大家如果遇到什么问题可以移步到这进行反馈。…

为了加深自己对 Webpack 理解，同时也能帮助到其他想要深入理解 Webpack 原理的同学。 我开了这样的一个仓库。 这个仓库分为两部分，一部分是项目主体，也就是 master 分支。这部分保持最新的代码，并尽可能实现 Webpack 的新特性。 另一部分是供大家学习的部…

Loader 是 Webpack 几大重要的模块之一。当你需要加载资源，就需要设置对应的 Loader，这样就可以对其源代码进行转换。 由于 Webpack 社区的繁荣，使得大部分的业务场景所使用的资源都有对用的 loader，可以参考官网的 available loaders…