Webpack5 系列

这是一篇有关前端构建系统论述的文章。较为全面地讲解了前端构建系统的构建步骤的关键和开发工具的几种选择。

如题，在研究 Webpack 时，这个问题也曾经困扰了我很久。 到目前为止，在我看来，这些术语可以这样理解： module：不同文件类型的模块。Webpack 就是用来对模块进行打包的工具，这些模块各

一、前言 上一篇讲到库的打包，本篇将介绍 TypeScript 的打包配置。 二、TS TypeScript 是 JavaScript 类型的超集，它能够被转换为普通的 JavaScript。为了在

一、前言 上一篇讲到代码分离，本篇将介绍库的打包。 Webpack 除了能够打包项目应用以外，还可以用来打包 JS 库。 当其他人安装了我们的库时，他们可能会在不同的环境中去引入，例如： 二、步骤 2

一、前言 上一篇讲到不同模式下的打包配置，本篇将介绍代码分离（Code Splitting）。 观察以上代码，我们发现在开头同步引入了 lodash，这没什么问题，但是一旦这个 index.js 文件

一、前言 上一篇讲到 Tree Shaking 相关的内容，本篇将介绍在不同模式（或称环境）下的打包处理。 二、不同环境下的打包配置 1. 开发环境的配置 2. 生产环境的配置 通过观察，我们会发现不

一、前言 上一篇讲到对JS语法的处理，本篇将介绍 Tree Shaking 。 我们经常会在主文件或者组件文件中引入其他模块中的代码，但实际上我们只用其中的一部分，剩下的代码则不需要引入。然而在默认情

Babel 版本更新后，很多内容已经发生变化，官方文档也是晦涩难读。本篇将介绍对于项目中 JS 文件的处理。

上一篇讲到如何处理静态资源，本篇将更进一步，介绍如何打造一个基础而不失效率的开发环境。HtmlWebpackPlugin、Source Map、WDS、HMR。

这一篇文章将会介绍如何利用 webpack 中的 Loaders 对静态资源做处理，Loaders 是 webpack 的核心概念之一。

基础篇主要介绍：为什么使用 Webpack， Webpack 打包流程， Webpack 的本源， Webpack 的配置文件， 简化 Webpack 打包流程。