📄️ 简介

本质上， webpack 是将 JavaScript 应用程序的讲台模块打包工具。

📄️ 安装

在目录下使用 npm init 初始化项目。 webpack 依托于 node.js 。所以，在 node 环境下即可：

📄️ 打包

基本写法：

📄️ 热更新

安装：

📄️ 模块

2009 年提出的包含模块、文件、 IO 、控制台在哪的一系列标准。在 Node.js 中实现了采用 CommonJS 标准的一部分。

📄️ 资源入口

Webpack 通过 context 和 entry 这两个配置项来共同决定入口文件的路径。在配置入口时，实际上做了两件事：

📄️ 资源出口

所有的出口配置在 output 对象中

📄️ 预处理器

loader

📄️ 样式处理

使用 mini-css-extract-plugin 可以将 css 单独出来。

📄️ 代码片段

CommonsChunkPlugin 是 Webpack 4 之前（之后是 SplitChunks ）自带的插件，将多个 Chunk 公共部分提取出来，能够降低整体资源体积，减少从模块的打包，提升开发速度。

📄️ 生产环境

生产环境的配置与开发环境有所不同，比如要设置 mode 、环境变量，为文件名添加 chunk hash 作为版本号等。

📄️ 优化

HappyPack