Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)(上)

简介: Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)

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

目录
相关文章
|
29天前
|
缓存 JavaScript 数据安全/隐私保护
js开发:请解释什么是ES6的Proxy,以及它的用途。
`ES6`的`Proxy`对象用于创建一个代理,能拦截并自定义目标对象的访问和操作,应用于数据绑定、访问控制、函数调用的拦截与修改以及异步操作处理。
17 3
|
1月前
|
JavaScript 前端开发 C语言
javascript基础入门
javascript基础入门
23 1
|
8天前
|
JavaScript 前端开发 应用服务中间件
node.js之第一天学习
node.js之第一天学习
|
1月前
|
运维 JavaScript 前端开发
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
|
1月前
|
JavaScript
Vue.js学习详细课程系列--共32节(4 / 6)
Vue.js学习详细课程系列--共32节(4 / 6)
33 0
|
1月前
|
前端开发 搜索推荐 JavaScript
编程笔记 html5&css&js 001 学习编程从网页开始
编程笔记 html5&css&js 001 学习编程从网页开始
|
2月前
|
前端开发 JavaScript 开发者
深入理解前端性能优化中的Webpack Tree Shaking
【2月更文挑战第2天】在前端开发中,性能优化一直是开发者们不断追求的目标之一。而在这个过程中,Webpack Tree Shaking 技术作为一种重要的优化手段,对于减小前端应用的体积、提高加载速度起到了至关重要的作用。本文将深入探讨Webpack Tree Shaking 技术的原理和实现方式,帮助读者更好地理解并运用这一技术来优化前端应用性能。
|
2月前
|
前端开发 JavaScript
从零开始学习前端开发:HTML、CSS、JavaScript入门指南
【2月更文挑战第1天】本文将带领读者从零开始学习前端开发,介绍HTML、CSS和JavaScript的基础知识与应用,帮助读者快速入门前端开发领域。
64 1
|
2月前
|
缓存 前端开发 算法
Webpack 进阶:深入理解其工作原理与优化策略
Webpack 进阶:深入理解其工作原理与优化策略
44 2
|
2月前
|
数据采集 机器学习/深度学习 JavaScript
画【Python折线图】的一百个学习报告(二、pyecharts引入js文件)
画【Python折线图】的一百个学习报告(二、pyecharts引入js文件)
51 0