Webpack图片处理
在Webpack中，一切皆模块，图片也不例外，也需要我们单独处理一下
安装
图片处理是通过 url-loader
npm install --save-dev url-loader@4.1.1
增加配置
{ test: /\.(png|svg|jpe?g|gif)$/i, use: { loader:"url-loader", options:{ // 阈值，小于20 * 1024kb，进行base64转码 limit:20 * 1024, // img/存放路径 [name]:图片名字 [hash:8]:hash8位 [ext]:后缀 name:"img/[name].[hash:8].[ext]" } } }
此时，可以添加效果20 * 1024 kb的图片，并进行测试
温馨提示
如果图片大于20 * 1024kb，则需要安装 file-loader
npm install --save-dev file-loader@6.2.0
不在需要做任何额外操作，即可引入大于20 * 1024kb，则是直接拷贝到 dist/img/ 目录下
特别提示
这里字体图标也是可以识别的，这也是Webpack5版本带来的优势，一次性全处理了~~~
Webpack中proxy代理
在做网络请求的时候，前端最常见的问题就是跨域，分别可以在前端和后端处理
前端
1、JSONP(需要服务器端支持)
2、proxy代理(开发模式)
后端
1、cors
安装网络请求方案
npm install --save-dev axios@0.27.2
增加配置
在 webpack.dev.config.js 增加配置
devServer:{ proxy: { //定义一个标记，如以后api开头的请求都走代理的设置 '/api': { // 要请求的真实服务端基地址 相当于被/api替代了 target: 'http://iwenwiki.com', //把api重写为空，因为别人没有 /api pathRewrite: { "^/api": "" }, //发送请求头中host会设置成target changeOrigin: true } } }
实现网络请求
import axios from "axios" axios.get("/api/api/FingerUnion/list.php").then(res=>{ console.log(res.data) })
自动清理dist
为了每次打包发布时自动清理dist目录下的文件（避免旧的文件会保留）
可以安装 clean-webpack-plugin 插件
安装
npm install --save-dev clean-webpack-plugin@3.0.0
插件的配置
// webpack.prod.config.js const commonConfig = require("./webpack.config"); const { merge } = require("webpack-merge"); const { CleanWebpackPlugin } = require('clean-webpack-plugin') const cleanPlugin = new CleanWebpackPlugin() const prodConfig = { mode: 'production', devtool: 'nosources-source-map', plugins: [cleanPlugin] } module.exports = merge(commonConfig,prodConfig)
Webpack优化
Webpack的优化在之前的对Webpack的操作已经有很多，例如：分离开发和生产环境、分离和压缩CSS代码，增加 devtool 优化开发和生产环境的调试等等
接下来再介绍一些优化方案：
1、规定文件处理区域
2、查看文件大小，过大的着手处理
规定文件处理区域
项目中js文件是很多的，尤其是在 node_modules 文件夹中，但是我们需要处理的就有 src 目录下的
所以我们需要指定区域
{ test: /\.js$/, use: ['babel-loader'], // 包含只处理 src 目录下的文件 include: path.resolve(__dirname, 'src'), }
查看文件大小，过大的着手处理
webpack-bundle-analyzer 是一个打包分析神器，它的界面也清晰，而且能很直观的给出每一个打包出来的文件的大小以及各自的依赖，能够更加方便的帮助我们对项目进行分析
安装： npm install --save-dev webpack-bundle-analyzer
增加配置：
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer'); module.exports = { plugins: [ new BundleAnalyzerPlugin({ analyzerPort: 8888, // 指定端口号 openAnalyzer: false, }) ] }
JavaScript中的代码检查
一个前端团队很重要的就是代码规范，有了代码规范才可以保证代码质量
常见的前端代码规范工具：
1、JSLint
2、JSHint
3、ESLint
当然这里我们首推 ESLint ,后续的Webpack中我们也是集成 ESLint
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解（学习总结---从入门到深化）（下）：https://developer.aliyun.com/article/1420357
