Webpack
前端工程化
webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多 个入口点构建一个依赖图，然后将你项目中所需的每一个模块组合 成一个或多个 bundles，它们均为静态资源，用于展示你的内容
搭建Webpack环境
1.安装全局 webpack
npm install --save webpack@5.73.0 2
npm install --save webpack-cli@4.10.0
2.创建本地项目文件夹
mkdir webpack_demo
cd webpack_demo
3.初始化项目
npm init
4.安装 webpack 到本地
npm install --save-dev webpack@5.73.0 2
npm install --save-dev webpack-cli@4.10.0
5.使用 webpack
创建项目结构 src 、 public
6.执行 webpack
webpack会自动寻找src目录，然后寻找index.js入口文件，然 后进行打包，最终生成一个dist目录为打包后内容。
在 public 下创建 index.html ，引入自动生成的 main.js 文件
增加配置文件
入口配置
在项目的根目录下创建 webpack.config.js 文件并输入入口代码
出口配置
在 webpack.config.js 文件增加出口配置代码
然后我们在执行 webpack 命令，此时就会默认执行 webpack.config.js 他会按照配置文件进行运行
使用Loader处理css文件
Webpack 只能理解 JavaScript 和 JSON 文件。loader 能让 webpack 能够去处理其他类型的文 件（比如css类型文件，图片类型等），并将它们转换为有效模块， 以供使用
Webpack 把一切文件看作模块，所以想打包 CSS需要安装 css-loader
安装 css-loader
npm install --save-dev css-loader@6.7.1
修改 webpack.config.js 配置文件
增加CSS文件
在 index.js 文件中引入CSS文件
此时运行会发现，css样式让然是无法加载的，因为 css-loader 只是能识别css文件。要显示css样式还需要引入 style-loader 才可以
安装 style-loader
npm install --save-dev style-loader@3.3.1
修改 webpack.config.js 配置文件
style-loader 和 css-loader 是存在先后顺序的，必须先写 style-loader 在写css-loader
使用Loader_处理Less文件
需要安装less和less-loader两个包
npm instal --save-dev less@4.1.3 less- loader@11.0.0
修改配置
修改 webpack.config.js 配置文件
增加 less 文件引入到项目中
使用Loader_处理Sass文件
需要安装sass和sass-loader两个包
npm instal --save-dev sass@1.52.3 sass- loader@13.0.0
修改配置
修改 webpack.config.js 配置文件
增加 scss 文件引入到项目中
使用插件_HTML插件
html-webpack-plugin 可以帮助我们将 src 的 index.html 复制一份到项目的根目录中
安装
npm install html-webpack-plugin@5.5.0 --save- dev
配置插件
会自动帮打包好的bundle.js 自动放进index.html 的底部
分离CSS文件
安装
npm install --save-dev mini-css-extract- plugin@2.6.1
修改配置文件
mini-css-extract-plugin 与 style-loader 冲突，需要删除 style-loader
压缩CSS文件
安装
npm install --save-dev optimize-css-assets- webpack-plugin@6.0.1
修改配置文件
配置Babel
安装
npm install --save-dev @babel/core@7.18.5 2
npm install --save-dev @babel/preset- env@7.18.2 3
npm install --save-dev babel-loader@8.2.5
在项目根目录下增加 babel.config.js 的配置文件
修改配置文件
模式(Mode)
提供 mode 配置选项，告知 webpack 使用相应模式的内置优化。
development
production
none
实现模式(Mode)有两种方式：
第一种：只需在配置对象中提供 mode 选项
module.exports = {
mode: 'development',
};
第二种：从 CLI 参数中传递
webpack --mode=development
使用DevServer
安装服务器依赖
npm install -g webpack-dev-server@4.9.2 2
npm install --save-dev webpack-dev- server@4.9.2
修改配置文件
服务器运行方式
webpack serve 2
webpack-dev-server
优点
提供 HTTP 服务而不是使用本地文件预览
监听文件的变化并自动刷新网页，做到实时预览
支持 Source Map，以方便调试
修改配置文件的情况下，是无法热更新的，需要重启服务器， 热更新只对代码剩下 src
配置快捷运行方案
在 package.json 中， scripts 中进行配置
如果在 package.json 文件中，并没有找到 scripts ,可以通过执行 npm init 重新生成 package.json 文件
开发模式与生产模式分离
webpack-merge 可以用来合并多个配置文件：
npm install --save-dev webpack-merge@5.8.0
创建开发和生产模式文件
在项目根目录下创建 webpack.dev.config.js 和 webpack.prod.config.js 文件
重新配置运行方式
devtool增强调试过程
通过设置 devtool 生成source map
Source Map
source map 是一个信息文件，里面存储着代码压缩前后的位置信息。
可以在Debug时直接显示原始代码的位置信息，而不是压缩后的，极大方便后期调试
开发环境下默认生成的Source Map ，记录的是生成后的代码的位 置。会导致运行时报错的行数与源代码的行数不一致的问题
解决方案：在webpack.dev.config.js中添加如下配置，即可保证 运行时报错的行数与源代码的行数保持一致
Source Map 的最佳实践
开发模式下
把devtool 的值设置为 source-map ,可直接定位到具体的错误行
生产环境下
关闭Source Map 或者 将devtool 设置为 hidden-nosources-source-map ,防止源码泄漏，提高网站的安全性
.browserslistrc文件
browserslistrc文件是为了表示当前项目的浏览器兼容情况
使用方式有三种
在package.json中设置
设置成独立的配置文件
在项目的根目录下创建 .browserslistrc 文件
> 1% // 兼容市场上占有率超过1%的浏览器(世界级)
last 2 versions // 兼容浏览器最近的两个版本
not dead // 不支持24个月内没有官方支持或者更新的浏览器
not ie 11 // 不支持ie 11
某些插件需要重新设置browserslist
postcss-loader处理css兼容
安装
npm install --save-dev autoprefixer@10.4.7
npm install --save-dev postcss@8.4.14
npm isntall --save-dev postcss-loader@7.0.0 4
npm install --save-dev postcss-preset- env@7.7.1
在项目根目录下创建 postcss.config.js 文件
修改 webpack.config.js 文件
修改CSS文件
构建React环境
安装
npm install -D @babel/preset-react@7.17.12
npm install -S react@18.2.0
npm install -S react-dom@18.2.0
增加配置文件
React使用的语法为 jsx 语法，所以我们需要配置 jsx 的解析模块
同时我们需要修改 babel.config.js 文件
编写React代码
构建Vue环境
安装
npm install --save vue@3.2.37
npm install --save-dev vue-loader@17.0.0
npm install --save-dev vue-style-loader@4.1.3
npm install --save-dev vue-template- loader@1.1.0
npm install --save-dev vue-template- compiler@2.6.14
增加配置文件
在 webpack.config.js 文件中
编写Vue代码
图片处理
安装
npm install --save-dev url-loader@4.1.1
增加配置
此时，可以添加效果20 * 1024 kb的图片，并进行测试
如果图片大于20 * 1024kb，则需要安装 file-loader
npm install --save-dev file-loader@6.2.0
不在需要做任何额外操作，即可引入大于20 * 1024kb，则是直接拷 贝到 dist/img/ 目录下
这里字体图标也是可以识别的，这也是Webpack5版本带来的优 势，一次性全处理了~~~
proxy代理
前端
JSONP(需要服务器端支持)
proxy代理(开发模式)
后端
cors
安装网络请求方案
npm install --save-dev axios@0.27.2
增加配置
在 webpack.dev.config.js 增加配置
实现网络请求
自动清理dist
安装
npm install --save-dev clean-webpack- plugin@3.0.0
插件的配置
Webpack的优化
分离开发和生产环境
分离和压缩CSS代码
增加 devtool 优化开发和 生产环境的调试
规定文件处理区域
项目中js文件是很多的，尤其是在 node_modules 文件夹中，但是我们需 要处理的就有 src 目录下的。所以我们需要指定区域
查看文件大小，过大的着手处理
webpack-bundle-analyzer 是一个打包分析神器，界面清晰，能很直观的给出每一个打包出来的文件的大小以及各自的依赖，帮助我们对项目进行分析
安装：
npm install --save-dev webpack-bundle-analyzer
增加配置
JavaScript中的代码检查
前端代码规范工具：
JSLint
优点：
配置是老道已经定好的，开箱即用
缺点：
有限的配置选项，很多规则不能禁用
规范严格，凡是不符合老道所认为的好的风格的，都会有警告
扩展性差
无法根据错误定位到对应的规则
JSHint
优点：
有了很多参数可以配置
支持配置文件，方便使用
支持了一些常用类库
支持了基本的 ES6
缺点：
不支持自定义规则
无法根据错误定位到对应的规则
ESLint
优点：
默认规则里面包含了 JSLint 和 JSHint 的规则，易于迁移
可配置为 警告 和 错误 两个等级，或者直接禁用掉
支持插件扩展
可以自定义规则
可以根据错误定位到对应的规则
支持 ES6
唯一一个支持 JSX 的工具
缺点：
需要进行一些自定义配置(因为太灵活了嘛，不过文档是很详细的)
慢 (它比其他两个都要慢)
配置ESLint
ESLint官网 https://eslint.org/
安装依赖
npm install eslint@8.18.0 eslint-webpack- plugin@3.1.1 --save-dev
webpack配置文件
新增 .eslintrc.js 文件
个人难以制定大而全的规范，此时我们可以借用大公司已成熟方案，再根据项目情况稍加修改，这里我们引用Airbnb
安装 Airbnb 规则依赖
npm install eslint-config-airbnb-base@15.0.0 eslint-plugin-import@2.26.0 --save-dev
eslint配置文件中使用 Airbnb
此时编写不规范的代码，会发现新增加了诸多规则，这就需要我们 一一改正了
