根据尚硅谷在本站的webpack教程整理，懒得发站内链接了。

本文是纯工具性的文章，用到哪查一下就行了。

*****代码缩进全乱了

基础

webpack作为静态资源打包工具，将项目文件编译、组合成一个或多个文件，使项目可以在浏览器上运行。webpack的输出文件称为bundle。在开发模式下， webpack可以编译ES Module内容，生产模式下还可以对js代码进行压缩。

安装：npm i webpack webpack-cli -D

启用：npx webpack ./src/main.js --mode=development，或--mode=production

启动webpack后，默认打包输出到dist目录下。

基本配置信息

• entry：指示打包入口文件

• output：指示打包输出路径、输出内容命名方式

• loader：不同的资源文件需要借助不同的loader被解析，webpack本体只支持js、json等资源

• mode：主要用development模式和production模式

• 开发模式目的：编译资源、代码检查

样式资源处理

• CSS：npm i css-loader style-loader -D

• css-loader：将css文件编译成webpack可识别的模块

• style-loader：动态创建style标签，放入css模块内容

• Less：npm i less-loader -D

• less-loader：将less文件编译成css文件

• Sass、Scss：npm i sass-loader sass -D

• sass-loader：将sass文件编译成css文件

• sass：被sass-loader用于编译

• Styl：npm i stylus-loader -D

• stylus-loader：将styl编译成css

对于样式资源，在webpack.config.js中，新增module.rules数组项，设置test和use两个属性，test属性用正则表达式匹配对应的样式资源文件，use属性用于指定使用的loader。典型的配置数组项如下：

图片资源处理

图片资源的loader已内置在webpack5中，使用时新增module.rules数组项，设置test为匹配图片资源的正则表达式，设置type为asset。还可设置parser字段用于将图片转为data URL格式，示例如下：

自动清空旧打包资源

设置output.clean为true即可

字体图标资源处理

asset/resource和asset的区别：

1. asset/resource相当于file-loader, 将文件转化成 Webpack 能识别的资源，其他不做处理

2. asset相当于url-loader, 将文件转化成 Webpack 能识别的资源，同时小于某个大小的资源会处理成 data URL形式

音视频资源处理

js格式与兼容性处理

Eslint

用于js、jsx语法检查

1. npm i eslint-webpack-plugin eslint -D

2. 新建.eslintrx.js配置文件（配置文件实际支持多种格式，也支持直接写入package.json）

3. 示例如下：

4. 在webpack.config.js中使用:

注：vscode安装eslint插件后，会自动进行检查，但会对编译后文件警告或报错，此时创建并配置.eslintignore并填写相关路径即可忽略检查。

Babel

用于将ES6语法的js转换为支持老旧浏览器的低版本js

1. npm i babel-loader @babel/core @babel/preset-env -D

2. 创建配置文件babel.config.js（配置文件实际支持多种格式，也支持直接写入package.json）

3. 示例如下：

   
   

   在presets中选定Babel插件

• @babel/preset-env: 一个智能预设，允许使用最新的 JavaScript。

• @babel/preset-react：一个用来编译 React jsx 语法的预设

• @babel/preset-typescript：一个用来编译 TypeScript 语法的预设

4. 在webpack.config.js中启用babel：

什么****排版啊，不会做、不想做专栏编辑就套个markdown谢谢

HTML资源处理

1. npm i html-webpack-plugin -D

2. 配置webpack.config.js：

    3. 在引用打包后资源的html代码中删除对js的引用

webpack自动化

1. npm i webpack-dev-server -D

2. 配置webpack.config.js如下：

    3. 执行npx webpack serve以启动开发服务器，代码在修改时会自动化编译。

生产模式打包

1. 修改配置文件，主要是mode值修改为production，其余的主要是删除一些只在开发模式下使用的配置项。

2. 执行npx webpack --config <file_name>

3. 为方便执行打包指令，可以在package.json中添加：

CSS处理改进

打包成单个css文件

依照前述方法，css文件会被打包至js文件中，通过js代码动态创建style标签的方式植入页面。该方法会影响用户体验，因此需要更改css加载机制，改为通过link标签加载。

1. npm i mini-css-extract-plugin -D

2. 修改webpack.config.js，除了引用插件外，需要在每一条rules数组元素的use属性数组中添加MiniCssExtractPlugin.loader，例：

兼容性处理

1. npm i postcss-loader postcss postcss-preset-env -D

2. 在rules下的css、scss、less文件规则中，在其css-loader项的后面，添加

    3. 在package.json中配置browserslist项，以指定兼容浏览器版本，例如："browserslist": ["ie >= 8"]

    4. 上述1中内容可以改为：

压缩CSS

1. npm i css-minimizer-webpack-plugin -D

2. 修改配置文件：

高级配置

开发体验

sourcemap用于生成源码和构建后代码的映射关系，保存在.map后缀的文件中，便于调试

通常根据打包模式采用下列用法：

开发模式：在module.exports中添加devtool: "cheap-module-source-map"

生产模式：添加devtool: "source-map"

cheap-module-source-map项相比正常的source-map项，减去了错误信息的列映射，使得编译速度提升

构建速度

HotModuleReplacement

HMR/热模块替换使得开发中修改模块代码不会使得项目整体重新编译，只对该模块进行修改。

使用时，在modeule.exports下添加：

为使得js也支持HMR，在main.js中添加

上述手动添加测试代码的方式在实际场景下通常不使用，转而使用已有的loader

OneOf

尽管配置文件中使用了正则表达式来过滤loader处理的文件，但实际运行中每一个正则表达式会被用于所有文件的匹配，导致匹配loader的检查速度缓慢（如css文件尽管已经匹配了css的loader，也还会被styl的loader进行匹配检查）。oneof可以优化匹配流程，使得每个文件只能匹配一个loader。

oneof的使用方法非常简单，只需在原有规则数组外包裹oneof。示意如下：

Include/Exclude

排除node_modules下的第三方库文件（已经编译好的js，不需要再处理），只包含src的文件

Cache

缓存eslint和babel编译结果

Thread

多进程打包

1. npm i thread-loader -D

2. 使用

   
   

压缩体积

Tree Shaking

默认开启，用于自动移除未使用的代码

Image Minimizer

压缩本地图片体积

1. npm i image-minimizer-webpack-plugin imagemin -D

2. 无损压缩安装：npm install imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo -D

   有损压缩安装：npm install imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo -D

3. 修改配置文件，以无损压缩为例：

   
   

如果打包报错提示缺少文件（第一次打包会提示缺少相关的图片处理程序）则下载对应文件复制到对应路径中。

优化性能

Code Split

打包时也对js进行分割，针对不同的渲染需求进行代码划分，减少代码加载体积。

1. npm i webpack webpack-cli html-webpack-plugin -D

2. 针对多入口文件，在module.exports.output中添加项：

    3. 针对多入口文件中相同的引用，将重复的引用单独打包，减少打包体积：

    4. 针对按需加载，只需使用import方式导入模块

    5. 针对单入口文件：

总结

提升开发体验

• 使用 Source Map 让开发或上线时代码报错能有更加准确的错误提示。

提升构建速度

• 使用 HotModuleReplacement 只重新编译修改过的代码。

• 使用 OneOf 提升loader匹配速度。

• 使用 Include/Exclude 排除或只检测某些文件。

• 使用 Cache 对 eslint 和 babel 处理的结果进行缓存。

• 使用 Thead 多进程处理 eslint 和 babel 任务，速度更快。

减少代码体积

• 使用 Tree Shaking 剔除没有使用的多余代码，让代码体积更小。

• 使用 @babel/plugin-transform-runtime 插件对 babel 进行处理，让辅助代码从中引入，而不是每个文件都生成辅助代码。

• 使用 Image Minimizer 对项目中图片进行压缩，体积更小，请求速度更快。

优化代码运行性能

• 使用 Code Split 对代码进行分割成多个 js 文件，减小单个文件体积，并行加载 js 速度更快，通过 import 动态导入语法进行按需加载。

• 使用 Preload / Prefetch 对代码进行提前加载。

• 使用 Network Cache 能对输出资源文件进行更好的命名，以便缓存。

• 使用 Core-js 对 js 进行兼容性处理。

• 使用 PWA 能让代码离线也能访问。

真的，3202年还不支持markdown的在线编辑器就是依托答辩，本质上和二十年前嵌到php jsp里面那种富文本编辑器没区别，甚至更难用。加了一堆华而不实的分割线，就觉得你们前端很会搞UX？