Webpack 基本原理

打包工具的作用

将框架语言，模块化语法，CSS预处理器等代码编译为浏览器可以识别的代码，，压缩代码，兼容性处理，提升代码性能。

打包工具有哪些

Webpack功能

开发模式：编译ES Module语法

生产模式：编译ES Module语法，压缩代码

注意：webpack本身功能较少，只能处理js资源，一旦遇到css等其他资源就会报错。所以接下来学习的重点是怎么处理其他资源？

webpack基本配置

五个核心概念

1. entry（入口）

指示 Webpack 从哪个文件开始打包

2.output（输出）

指示 Webpack打包完的文件输出到哪里去，如何命名等

3. loader（加载語）

webpack 本身只能处理 js、json 等资源，其他资源需要借助 loader，Webpack 才能解析

4. plugins（插件）

扩展 Webpack 的功能

5.mode（模式）

主要由两种模式：

• 开发模式：development

• 生产模式：production

准备webpack配置文件（项目根目录下）

命名必须为webpack.config.js

运行打包命令：npx webpack

开发模式介绍（做两件事）

编译代码

代码质量检查

处理样式资源（css,less,sass ,scss,styl）---Loader

Loaders | webpack 中文文档 | webpack中文文档 | webpack中文网

处理图片资源---Loader

webpack4：file-loader和url-loader

webpack5：将两个loader内置到webpack中，写法类似于上面的配置

修改输出文件的路径---output

将js资源和图片资源分类存放

自动清空上次打包的内容--clean

处理字体图标资源---与加载图片资源配置类似

处理其他资源（音频等资源）---与加载字体图标资源配置一样

处理js资源

webpack不是已经对js进行处理了么？为什么还需要考虑怎么处理？

• 因为webpack只能编译js中ES模块化语法，不能编译其他语法，导致js不能在IE等浏览器运行。
• 另外需要使用专业的工具对代码的质量进行检测。

js兼容性处理：Babel

代码格式处理：Eslint

处理顺序：Eslint->Babel

ESlint

EslintWebpackPlugin | webpack 中文文档 | webpack中文文档 | webpack中文网

可以用来检测js和jsx语法的工具，可以配置各项功能。

配置文件（重点：按照配置文件书写的rules对代码进行检查）（项目根目录下）

写法（存在一个即可）：

• .eslintrc
• .eslintrc.js
• .eslintrc.json
• package.json中的eslintConfig:不需要创建文件，在package.json中配置该属性

具体配置(js版本为例子):

1.parserOptions 解析选项

2.rules具体规则

3.extends继承

不打包即可提示代码不规范的工具

 使用上面的Eslint工具之后，项目中我们只需要判断src文件表下的js代码是否符合规范，所以当src之外的代码不符合规范时，也会有红色的警告怎么办呢？

在项目根目录下创建.eslintignore文件添加不需要检查的代码路径。

Babel

作用：将Es6等较高级的js语法转换为向后兼容的js语法，使得可以兼容旧版本的六零看或其他环境中。

配置文件（项目根目录下）

babel-loader | webpack 中文文档 | webpack中文文档 | webpack中文网

写法（存在一个即可）：

• .babel.config.js
• .babel.config.json
• .babelrc
• .babelrc.js
• .babelrc.json
• package.json中的babel:不需要创建文件，在package.json中配置该属性
• webpack.config.js中的添加babel-loader（虽然方便，但是不推荐，不易于管理）

具体配置（.babel.config.js为例）

1.presets预设

处理html资源

HtmlWebpackPlugin | webpack 中文文档 | webpack中文文档 | webpack中文网

为什么还需要处理html资源？

因为默认public中index.html中的js代码是我们手动引入的，但是js文件打包之后有可能名称，路径等会发生改变，那么还需要我们手动引入！所以我们需要通过插件实现自动引入。

根据public/index.html（这个文件可以当作模板）的结构打包生成html

开发服务器&自动化

作用：更新代码后自动打包

1.安装webpack-dev-server包

npm install webpack-dev-server -D

2.在webpack配置文件中添加配置

打包命令为：npx webpack serve 

注意：在开发服务器（devServer）中，使用npx webpack serve 打包是不会输出打包文件（dist）的,会在内存中编译打包

生产模式介绍

区分开发模式和生产模式

1.webpack配置文件独立分开

为了区分开发模式和生产模式，我们创建两个单独的webpack.config文件同意放到config文件夹进行管理

2.打包命令需要表明配置文件的位置

由于配置文件夹不在项目的根目录库下，所以运行打包命令时需要指明配置文件的路径

• npx webpack serve --config ./config/webpack.dev.js  //(因为是开发模式，有devServe所以命令中有serve)
• npx webpack --config ./config/webpack.prod.js

3.在package.json中配置运行命令

因为命令较长，手动编写命令较麻烦，所以统一在package.json中添加运行项目的命令和打包项目的命令

终端中分别是这样运行：

• npm start
• npm run dev
• npm run build

生产模式和开发模式的区别

生产模式配置中不需要devServer开发服务器的配置，即打包命令中不需要添加serve

mode要从development更改为production

打包命令为npx webpack 而不是npx webpack serve，因为没有开发服务器

生产模式-----CSS文件处理

MiniCssExtractPlugin | webpack 中文文档 | webpack中文文档 | webpack中文网

CSS文件目前被打包到js文件中，js文件加载时会创建style标签来生成样式，网络较慢时会出现闪屏的情况（css样式加载慢，在html结构渲染之后才显示出来），用户体验不好，所以我们应该将css样式作为单独的文件，通过link标签引入html性能才会好。

1.下载包

npm install --save-dev mini-css-extract-plugin

2.webpack中配置

引入css处理的插件

在module中添加

在plugins中添加配置

最后的效果：运行npm run build之后在打包文件中会生成css文件，并且html的插件会自动将css以及js等用到的资源自动引入index.html中

生产模式-----CSS兼容性处理

1.下载包

npm install postcss-loader postcss postcss-preset-env -D

2.webpack中配置

生产模式-----封装样式loader函数

因为css样式的loader的配置比较冗余，有很多重复项，所以封装一个函数比较好

生产模式-----Css压缩

CssMinimizerWebpackPlugin | webpack 中文文档 | webpack中文文档 | webpack中文网

1.下载包

npm install css-minimizer-webpack-plugin --save-dev

2.webpack中配置（不知道为什么加这个配置打包就报错！！！）

生产模式-----Html压缩

默认生产模式开启了html压缩和js压缩