WEBPACK基础配置【总结】

webpack打包原理
webpack是一个js应用程序的静态模块打包工具,当webpack处理应用程序时,它的内部构建一个依赖图,会映射项目中需要打包的每个模块,并生成一个或多个bundle包。因此我们会在web pack.config.js中配置各种打包规则,那其中配置打包环境的是mode,可以配置打包的是开发环境还是生产环境;配置打包入口的是entry,一般情况配置的是单页面入口,那如果想配置多页面入口可以以对象的形式进行配置;配置打包出口的是output,可以根据hash值来配置文件名称;在module中配置加载器,如babel- loaded等,一般用于实现代码编译;plugin可配置插件,处理压缩等;resolve为解析器,其中可在alias别名中配置@替代src路径;optimization可设置优化项进行js和css压缩;devServer配合webpack-dev-server启动本地web服务器并实现跨域处理。
proxy跨域代理原理
客户端向服务器发请求,代理服务器与客户端的域名、协议、端口号相同为同源,因此可以发送请求给代理服务器,然后请求数据通过代理服务器转发到真正的服务器获取数据,服务器与服务器之间没有域的限制,所以可将数据返回给代理服务器,然后代理服务器将数据转发给客户端。
强缓存原理
客户端基于GUI线程进行渲染,遇到img、script、link都会单独开辟新的http网络请求,并去服务器获取相关资源,返回给客户端html相关代码,客户端一旦发现对应响应头字段信息,自己将缓存资源存储到本地,并且缓存相关标识,如果需要设置强缓存,需要服务器返回资源的同时在响应头中设置expires和cache-controls,设置强缓存后如果要保证服务器资源更新同时本地资源也更新,那入口文件index.html一定不能设置强缓存,需要通过打包文件名不同进行更新其内容。

// 在webpack.config.js文件中
const path = require('path') // node内置的路径处理模块
const HtmlWebpackPlugin = require('html-webpack-plugin') // 打包编译的html,对打包后的html进行压缩处理
const { CleanWebpackPlugin } = require('clean-webpack-plugin') // 自动删除之前打包的文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin') // 将css文件提取到单独的文件
const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin') // 压缩css文件
const TerserWebpackPlugin = require('terser-webpack-plugin') //  压缩js文件// 多页面入口需要的配置
// 前提我们设置的名字和src、public入口页面模版名字相同,打包后的文件也基于命名
const pageArr = ['index','login']
const entryObj = {}
const htmlPlugin = []
pageArr.forEach((chunk)=>{entryObj[chunk] = `./src/${chunk}.js`htmlPlugin.push(new HtmlWebpackPlugin({template:`./public/${chunk}.html`, // 指定页面模版filename:`${chunk}.html`, // 打包后文件名称minify:true, // 视都压缩chunks:[chunk] // 指定导入资源的名称}))
})module.exports = {// 基础设置mode: 'production', // 打包模式entry: './src/index.js', // 单页面入口// 多页面入口// entry: entryObjoutput:{filename:'main.[hash:8].js',// [hash:8]为打包后的文件创建哈希值,代码被修改生成文件名中哈希值也变化,有助于强缓存的设置path:path.resolve(__dirname,'./dist')},// 优化项,设置压缩方式optimization:{minimizer: [new CssMinimizerWebpackPlugin(),new TerserWebpackPlugin()]},// 使用插件plugins:[new HtmlWebpackPlugin({template:'./public/index.html',filename:'index.html',minify:true}),new CleanWebpackPlugin(),new MiniCssExtractPlugin({// 打包后的css文件名称,单独提取到css文件中,并自动导入html文件filename:'main.[hash:8].css'})],// dev-serverdevServer:{host:'127.0.0.1', // 域名port:3000, // 端口号open:true, // 自动打开浏览器hot:true, // 热更新compress:true, // 开启服务器端的gizp压缩proxy:{ // 跨域处理'/api':{target:'http://www.com.wd', // 代理真正的服务器地址pathRewrite:{'^/api':''}, // 地址重写,主要用于区分不同代理前缀,从最后请求的真正地址中移除changeOrigin:true, // 修改请求头中origin源信息ws:true // 支持webscoket通信机制}}},// loader加载器:执行顺序 上->下 右->左module:{rules:[{test: /.\(css|less)$/, // 基于正则匹配,我们需要处理的文件use:[{MiniCssExtractPlugin.loader, // 抽离css代码// "style-loader", // 把css以内嵌式导入页面"css-loader", // 处理特殊语法// 在package.json文件中设置browserslist浏览器兼容性// 在postcss.config.js文件中设置插件导入autoprefixer设置css3样式问题"postcss-loader", // 配合autoprefixer&browserslist给css3属性设置前缀"less-loader" // 将less编译为css},{// 在babel.config.js文件中将es6转化为es5,@babel/preset-envtest: /.\js$/,use:["babel-loader"],// 有关js兼容性处理,将es6转化为es5,使用babel-loader、@babel/preset-env、@babel/core、@browserslist// es6内置api的兼容,导入@babel/polyfill,对常见内置api进行重写,但对fetch、reflect没有重写exclude: /node_modules/ // 可优化打包速度,忽略node_modules},{// 图片引入静态资源地址进行渲染,遇到静态资源图片会重新向服务器发送请求,然后编码再进行渲染,图片速度会较慢// 将图片转化为base64格式,可以直接不用向服务器发送请求,这样图片渲染速度会加快// js中处理静态资源图片,需要基于ESModule规范导入,这样打包才会对此图片进行打包,如果写相对地址打包后地址会不一样,找不到图片test: /\.(png|jpe?g|gif)$/i,type:'javascript/auto', // webpack5需要的use:[{loader: 'url-loader',options:{limit:200*1024, // 将指定大小内的图片转化为base64esModule:false,name: 'images/[name].[hash:8].[ext]' // 编译后没有转化为base64的图片,编译输出的路径和名称}}]}]}]},// 设置打包最大资源大小performance:{maxAssetSize:100*1024*1024,maxEntrypointSize:100*1024*1024},// 解析器resolve:{// @以后代表的就是src这个路径alias:{ '@':path.resolve(__dirname,'./src') }}}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/77884.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Datawhale简单学点大模型笔记】大模型的有害性

参考: https://github.com/datawhalechina/so-large-lm/blob/main/第三章:大模型的有害性-上.md https://github.com/datawhalechina/so-large-lm/blob/main/第四章:大模型的有害性-下.md 大模型的有害性 性能差异社会偏见和刻板印象有害信…

C++面试/笔试准备,资料汇总

文章目录 后端太卷,建议往嵌入式,qt,测试,音视频,C一些细分领域投简历。有任何疑问评论区聊,我看到了回复 C面试/笔试准备,资料汇总自我介绍项目实习尽可能有1.编程语言:一.熟悉C语言…

【牛客面试必刷TOP101】Day4.BM15删除有序链表中重复的元素-I和BM17二分查找-I

作者简介:大家好,我是未央; 博客首页:未央.303 系列专栏:牛客面试必刷TOP101 每日一句:人的一生,可以有所作为的时机只有一次,那就是现在!!!&…

前端面试题JS篇(6)

ES6 Module 和 CommonJS 模块的区别: CommonJS 是对模块的浅拷⻉,ES6 Module 是对模块的引⽤,即 ES6 Module 只存只读,不能改变其值,也就是指针指向不能变,类似 const; import 的接⼝是 read-o…

ATFX汇市:离岸人民币大幅升值,昨日盘中跌破7.3关口

ATFX汇市:美国CPI数据即将公布之际,周一美元指数大跌,带动离岸人民币升值0.85%,实现3月14日以来的最大单日升值幅度,当日汇率(USDCNH)最低触及7.292,突破7.3000关口。消息面上&#…

【LangChain系列 8】Prompt模版——少样本prompt模版(二)

原文地址:【LangChain系列 8】Prompt模版——少样本prompt模版(二) 本文速读: 固定少样本prompt模版 动态少样本prompt模版 在上篇文章中介绍了少样本模版的基本用法,本文将介绍 对话模型(chat model) 中 少样本prompt模版的用法。 LangCh…

Gogs国内大佬开发的git私有服务

Gogs 的目标是打造一个最简单、最快速和最轻松的方式搭建自助 Git 服务。 gogs官网:https://gogs.io/ github地址:https://github.com/gogs/gogs/tree/main/docker docker安装gogs服务 docker pull gogs/gogs 启动gogs容器 docker run --namegogs -…

《TCP/IP网络编程》阅读笔记--基于UDP的服务器端/客户端

目录 1--TCP和UDP的主要区别 2--基于 UDP 的数据 I/O 函数 3--基于 UDP 的回声服务器端/客户端 4--UDP客户端Socket的地址分配 5--UDP存在数据边界 6--UDP已连接与未连接的设置 1--TCP和UDP的主要区别 ① TCP 提供的是可靠数据传输服务,而 UDP 提供的是不可靠…

现成Hadoop配置,图文手把手交你

为了可以更加快速的可以使用Hadoop,便写了这篇文章,想尝试自己配置一下的可以参考从零开始配置Hadoop,图文手把手教你,定位错误 资源 1.两台已经配置好的hadoop 2.xshellVmware 链接:https://pan.baidu.com/s/1oX35…

性能测试 —— Jmeter定时器

固定定时器 如果你需要让每个线程在请求之前按相同的指定时间停顿,那么可以使用这个定时器;需要注意的是,固定定时器的延时不会计入单个sampler的响应时间,但会计入事务控制器的时间 1、使用固定定时器位置在http请求中&#xf…

用 Github Codespaces 免费搭建本地开发测试环境

如何丝滑地白嫖一个本地开发环境?怎么新建一个代码空间? 1:通过Github网页新建2:通过VSCode插件新建 为代码创建相应的开发测试环境 如何丝滑地白嫖一个本地开发环境? 使用Codespaces为开发者解决这样的痛点&#xf…

SQL约束

约束 1.概念:约束是作用于表中字段上的规则,用于限制存储在表中的数据。 2.目的:保证数据库中数据的正确、有效性和完整性。 3.分类: 约束描述关键字非空约束限制该字段的数据不能为nullNOT NULL唯一约束保证该字段的所有数据…

基于STM32智能环境系统

摘要 本系统采用stm32f407作为主控芯片,实现对环境的监测。并且通过和手机通信,获取当前的天气预报信息,结合当前测得的温湿度,可以为用户提供出行建议。利用stm32自带的RTC可以实现时间及闹钟功能。此外RTC还可以用于电子日历的…

Vue中props组件和slot标签的区别

在 Vue 中,props 和 slot 都是组件之间进行通信的机制,它们的作用和应用场景有一些区别: props 是一种组件的数据传递机制,通过在父组件中以属性的形式向子组件传递数据。子组件接收这些数据,并可以进行相应的处理和渲…

贪心算法(Greedy Algorithm)

贪心算法(Greedy Algorithm)是一种解决优化问题的算法策略。在贪心算法中,每一步都会选择当前情况下最优的选择,而不考虑未来的后果。 贪心算法的基本思想是通过局部最优选择达到全局最优。它并不保证一定能得到全局最优解&#…

数分面试题2-牛客

1、面对大方差如何解决 1,AB实验场景下,如果一个指标的方差较大表示它的波动较大,那么实验组和对照组的显著差异可能是因为方差较大即随机波动较大。解决方法有:PSM方法、CUPED(方差缩减) PSM代表"Propensity Score Matchin…

exec failed: exec failed..... exec: “ip“(Docker容器没有ip addr命令:exec ip addr 报错)

exec failed: exec failed..... exec: "ip"(Docker容器没有ip addr命令:exec ip addr 报错) 原因:镜像为精简版,无ip addr命令 解决:更换apt 配置文件中的镜像,安装工具 iproute2 # 进入配置文…

phpstudy本地快速搭建网站,并外网访问【无公网IP】

文章目录 使用工具1. 本地搭建web网站1.1 下载phpstudy后解压并安装1.2 打开默认站点,测试1.3 下载静态演示站点1.4 打开站点根目录1.5 复制演示站点到站网根目录1.6 在浏览器中,查看演示效果。 2. 将本地web网站发布到公网2.1 安装cpolar内网穿透2.2 映…

深入解析 qsort 排序(上),它为什么是万能排序?

前言:对于库函数有适当了解的朋友们,对于 qsort 函数想必是有认知的,因为他可以对任意数据类型进行排序的功能属实是有点厉害的,本次分享,笔者就给大家带来 qsort 函数的全面的解读 本次知识的分享笔者分为上下俩卷文章…

每日一题:leetcode 2594 修车的最少时间

给你一个整数数组 ranks ,表示一些机械工的 能力值 。ranksi 是第 i 位机械工的能力值。能力值为 r 的机械工可以在 r * n2 分钟内修好 n 辆车。 同时给你一个整数 cars ,表示总共需要修理的汽车数目。 请你返回修理所有汽车 最少 需要多少时间。 注意…