第 1 章：webpack 简介
1.1 webpack 是什么
webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。
在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理。
它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)
1.2 webpack 五个核心概念
1.2.1 Entry
入口(Entry)指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。
1.2.2 Output
输出(Output)指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。
1.2.3 Loader
Loader 让 webpack 能 够 去 处 理 那 些 非 JavaScript 文 件 (webpack 自 身 只 理 解
JavaScript)
1.2.4 Plugins
插件(Plugins)可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，
一直到重新定义环境中的变量等。
1.2.5 Mode
第 2 章：webpack 的初体验
2.1 初始化配置
1. 初始化 package.json
输入指令:
npm init
2. 下载并安装 webpack
输入指令:
npm install webpack webpack-cli -g
npm install webpack webpack-cli -D
2.2 编译打包应用
1. 创建文件
2. 运行指令
开发环境指令：webpack src/js/index.js -o build/js/built.js --mode=development
功能：webpack 能够编译打包 js 和 json 文件，并且能将 es6 的模块化语法转换成
浏览器能识别的语法。
生产环境指令：webpack src/js/index.js -o build/js/built.js --mode=production
功能：在开发配置功能上多一个功能，压缩代码。
3. 结论
webpack 能够编译打包 js 和 json 文件。
能将 es6 的模块化语法转换成浏览器能识别的语法。
能压缩代码。
4. 问题
不能编译打包 css、img 等文件。
不能将 js 的 es6 基本语法转化为 es5 以下语法。
第 3 章：webpack 开发环境的基本配置
3.1 创建配置文件
1. 创建文件 webpack.config.js
2. 配置内容如下
3. 运行指令: webpack
4. 结论: 此时功能与上节一致
3.2 打包样式资源
1. 创建文件
2. 下载安装 loader 包
npm i css-loader style-loader less-loader less -D
4. 运行指令: webpack
3.3 打包 HTML 资源
1. 创建文件
2. 下载安装 plugin 包
npm install --save-dev html-webpack-plugin
3. 修改配置文件
4.运行指令: webpack
3.4 打包图片资源
1. 创建文件
2. 下载安装 loader 包
npm install --save-dev html-loader url-loader file-loader
3. 修改配置文件
4. 运行指令: webpack
3.5 打包其他资源
1. 创建文件
2. 修改配置文件
3.6 devserver
1. 创建文件
2. 修改配置文件
4. 运行指令: npx webpack-dev-server
3.7 开发环境配置
1.创建文件
2. 修改配置文件
3. 运行指令: npx webpack-dev-server
第 4 章：webpack 生产环境的基本配置
4.1 提取 css 成单独文件
1. 下载安装包
2.下载插件
npm install --save-dev mini-css-extract-plugin
3. 修改配置文件
4.2 css 兼容性处理
1.创建文件
2.下载 loader
npm install --save-dev postcss-loader postcss-preset-env
3.修改配置文件
4.3 压缩 css
1.创建文件
2. 下载安装包
npm install --save-dev optimize-css-assets-webpack-plugin
3. 修改配置文件
4.4 js 语法检查
1.创建文件
2. 下载安装包
npm install --save-dev eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import
3. 修改配置文件
4.5 js 兼容性处理
1.创建文件
2. 下载安装包
npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/polyfill core-js
3. 修改配置文件
4.6 js 压缩
1.创建文件
2. 修改配置文件
4.7 HTML 压缩
1.创建文件
2. 修改配置文件
4.8 生产环境配置
1.创建文件
2. 修改配置文件
第 5 章：webpack 优化配置
5.1 HMR
1.创建文件
2. 修改配置文件
5.2 source-map
1.创建文件
2. 修改配置文件
5.3 oneOf
1.创建文件
2. 修改配置文件
5.4 缓存
1 创建文件
2. 修改配置文件
5.5 tree shaking
1. 创建文件
2. 修改配置文件
5.6 code split
1.创建文件
5.7 lazy loading
1. 创建文件
2. 修改配置文件
5.8 pwa
1. 创建文件
2. 下载安装包
npm install --save-dev workbox-webpack-plugin
3. 修改配置文件
4、
5.9 多进程打包
1.创建文件
2. 下载安装包
npm install --save-dev thread-loader
3. 修改配置文件
5.10 externals
5.10 dll
第 6 章：webpack 配置详情
6.1 entry
1.创建文件
2.修改配置文件
6.2 output
6.3 module
6.4 resolve
6.5 dev server
6.6 optimization
第 7 章：webpack5 介绍和使用
# webpack5
此版本重点关注以下内容:
- 通过持久缓存提高构建性能.
- 使用更好的算法和默认值来改善长期缓存.
- 通过更好的树摇和代码生成来改善捆绑包大小.
- 清除处于怪异状态的内部结构，同时在 v4 中实现功能而不引入任何重大更改.
- 通过引入重大更改来为将来的功能做准备，以使我们能够尽可能长时间地使用 v5.
## 下载
- npm i webpack@next webpack-cli -D
## 自动删除 Node.js Polyfills
早期，webpack 的目标是允许在浏览器中运行大多数 node.js 模块，但是模块格局发生了变化，许多模块用途现在主要是为前端目的而编写的。webpack <= 4 附带了许多 node.js 核心模块的 polyfill，一旦模块使用任何核心模块（即 crypto 模块），这些模块就会自动应用。
尽管这使使用为 node.js 编写的模块变得容易，但它会将这些巨大的 polyfill 添加到包中。在许多情况下，这些 polyfill 是不必要的。
webpack 5 会自动停止填充这些核心模块，并专注于与前端兼容的模块。
迁移：
- 尽可能尝试使用与前端兼容的模块。
- 可以为 node.js 核心模块手动添加一个 polyfill。错误消息将提示如何实现该目标。
## Chunk 和模块 ID
添加了用于长期缓存的新算法。在生产模式下默认情况下启用这些功能。
`chunkIds: "deterministic", moduleIds: "deterministic"`
## Chunk ID
你可以不用使用 `import(/* webpackChunkName: "name" */ "module")` 在开发环境来为 chunk 命名，生产环境还是有必要的
webpack 内部有 chunk 命名规则，不再是以 id(0, 1, 2)命名了
## Tree Shaking
1. webpack 现在能够处理对嵌套模块的 tree shaking
```js
// inner.js
export const a = 1;
export const b = 2;
// module.js
import * as inner from './inner';
export { inner };
// user.js
import * as module from './module';
console.log(module.inner.a);
```
在生产环境中, inner 模块暴露的 `b` 会被删除
2. webpack 现在能够多个模块之前的关系
```js
import { something } from './something';
function usingSomething() {
return something;
}
export function test() {
return usingSomething();
}
```
当设置了`"sideEffects": false`时，一旦发现`test`方法没有使用，不但删除`test`，还会删除`"./something"`
3. webpack 现在能处理对 Commonjs 的 tree shaking
## Output
webpack 4 默认只能输出 ES5 代码
webpack 5 开始新增一个属性 output.ecmaVersion, 可以生成 ES5 和 ES6 / ES2015 代码.
如：`output.ecmaVersion: 2015`
## SplitChunk
```js
// webpack4
minSize: 30000;
```
```js
// webpack5
minSize: {
javascript: 30000,
style: 50000,
}
```
## Caching
```js
// 配置缓存
cache: {
// 磁盘存储
type: "filesystem",
buildDependencies: {
// 当配置修改时，缓存失效
config: [__filename]
}
}
```
缓存将存储到 `node_modules/.cache/webpack`
## 监视输出文件
之前 webpack 总是在第一次构建时输出全部文件，但是监视重新构建时会只更新修改的文件。
此次更新在第一次构建时会找到输出文件看是否有变化，从而决定要不要输出全部文件。
## 默认值
- `entry: "./src/index.js`
- `output.path: path.resolve(__dirname, "dist")`
- `output.filename: "[name].js"`
## 更多内容
https://github.com/webpack/changelog-v5
