前端框架前置学习Webpack(1) 常用webpack配置

什么是Webpack?

定义

        本质上,Webpack是用于现代JavaScript应用程序的静态模块打包工具.当webpack处理应用程序时,它会在内部从一个或多个入口点构建一个依赖图(dependency graph),然后将你项目中所需的每一个模块组合成一个或多个bundles,它们均为静态资源,用于展示你的内容.

静态模块:指的是编写代码过程中的,html,css,js,图片等固定内容的文件

打包:把静态模块内容,压缩,整合,转译等(前端工程化)

  • 把less/sass转成css代码
  • 把ES6+降级成ES5
  • 支持多种模块标准语法

为什么学习Webpack

很多项目基于Webpack构建,并为Vue React脚手架使用做铺垫

使用Webpack

需求:封装utils包,校验手机号长度和验证码长度,在src/index.js中使用并打包观察

步骤:

        1.新建并初始化项目,编写业务源代码

        2.下载webpack webpack-cli到当前项目中(版本独立),并配置局部自定义命令

在终端中使用npm下载webpack

在package.json中配置webpack

使用webpack

修改Webpack打包入口和出口

Webpack配置:影响Webpack打包过程和结果

步骤:

        1.项目根目录,新建webpack.config.js配置文件

        2.导出配置对象,配置入口,出口文件的路径

entry配置入口

putput配置出口

        3.重新打包观察

注意:只有和入口产生直接/间接的引入关系,才会被打包

案例:用户登录-长度判断

需求:点击登录按钮,判断手机号和验证码长度

步骤:

        1.准备用户登录页面

        2.编写核心js逻辑代码

        3.打包并手动复制网页到dist下,引入打包后的js,运行

核心:

        Webpack打包后的代码,作用在前端网页中使用

自动生成html文件

插件html-webpack-plugin:在Webpack打包时生成html文件

步骤:

1.下载html-webpack-plugin本地软件包

2.配置webpack.comfig.js让Wepack拥有插件功能

3.重新打包观察效果

打包css代码

        加载器 css-loader:解析css代码

        加载器style-loader:把解析后的css代码插入到DOM

        注意:Webpack默认只识别js代码

步骤:

        1.准备css文件代码引入到src/login/index.js中(压缩转译处理等)

        2.下载css-loader和style-loader本地软件包

        3.配置webpack.config.js让Webpack拥有该加载器功能

        4.打包后观察效果

优化-提取css代码

插件mini-css-extract-plugin:提取css代码

注意:不能和style-loader一起使用

好处:css文件可以被浏览器缓存,减少js文件体积

步骤:

        1.下载mini-css-extract-plugin本地软件包

        2.配置webpack.config.js让Webpack拥有该插件功能

        3.打包后观察效果

优化-压缩过程

问题:css代码提取后没有压缩

解决:使用css-minimizer-webpack-plugin插件

步骤:

        1.下载css-minimizer-webpack-plugin本地软件包

        2.配置webpack.config.js让webpack拥有该功能

        3.打包重新观察

打包less代码

加载器less-loader:把less代码编译为css代码

步骤:

        1.新建less代码(设置背景图)并引入到src/login/index.js中

        2.下载less和less-loader本地软件包

注意:less-loader需要搭配less软件包使用

        3.配置webpack.config.js让Webpack拥有功能

打包图片

资源模块:Webpack5内置资源模块(字体,图片等)打包,无需额外loader

步骤:

        1.配置webpack.comfig.js让Webpack拥有打包图片功能

        占位符[hash]对模块内容做算法计算,得到映射的数字字母组合的字符串

        占位符[ext]使用当前模块原本的占位符,例如: .png/.jpg等字符串

        占位符[query]保留引入文件时代码中串参数(只有URL下生效)

        

        2.打包后观察效果和区别

注意:

        判断临界值默认为8kb

        大于8kb文件:发送一个单独的文件并导出URL地址

        小于8kb文件:导出一个data URI(base64字符串)

webpack搭建开发环境

问题

        之前改代码,需重新打包才能运行查看,效率很低

开发环境

        配置webpack-dev-server快速开发应用程序

作用:

        启动web服务,自动检测代码变化,热更新到网页

注意:dist目录和打包内容是在内存里(更新快)

步骤:

        1.下载webpack-dev-server软件包到当前项目

        2.设置模式为开发模式,并配置自定义命令

        3.使用npm run dev 来启动开发服务器,试试热更新效果

打包模式:

        告知webpack使用相应模式的内置优化

分类

        

模式名称模式名字特点场景
开发模式development调试代码,实时加载,模块热替换等本地开发
生产模式production压缩代码,资源优化,更轻量等打包上线

设置:

        方式1:在webpack.config.js配置文件设置mode选项\

        方式2:在package.json命令行设置mode参数

注意:命令行设置的优先级高于配置文件中,推荐用命令行设置

打包模式的应用

需求:

        在开发模式下用style-loader内嵌更快,在生产模式小艾提取css代码

        方案1:webpack.config.js配置导出函数,但局限性大(只接受2种模式)

        方案2:借助cross-env(跨平台通用)包命令,设置参数区分环境

        方案3:配置不同的webpack.config.js(适用多种模式差异性较大情况)

步骤:

        1.下载cross-env软件包当当前项目

        2.配置自定义命令,传入参数名和值(会绑定到process.env对象下)

        3.在webpack.config.js区分不同环境使用不同配置

        4.重新打包观察两种配置区别

前端-注入环境变量

        需求:前端项目中,开发模式下打印语句生效,生产模式下打印语句失败

        问题

                cross-env设置只在Node.js环境生效,前端代码无法访问peocss.env.NODE_ENV

        解决

                使用Webpack内置的DefinePlugin插件

        作用:在编译时,将前端代码中匹配的变量名,替换为值或者表达式

开发环境调错 - source map

问题

        代码被压缩和混淆,无法正确定位源代码位置(行数和列数)

source map:可以准确追踪error和warnig在原始代码的位置

设置:

        webpack.config.js配置devtool选项

        inline-souce-map选项:把源码的位置信息一起打包在js文件内

        注意:source map 仅适用于开发环境,不要在生产环境使用(防止被查看源码位置)

解析别名alias

        解析别名

                配置模块如何解析,创建import引入路径别名,来确保模块引入变得简单

        例如:原来路径如图,比较长而且相对路径不安全

        解决:

                在webpack.config.js中配置解析别名@来代表src绝对路径

优化-CDN使用

CDN定义:

        内容分发网络,指的是一组分布在各个地区服务器

作用:

        把静态资源文件/第三方库放在CDN网络中各个服务器中,供用户请求获取

好处:

        减轻自己服务器请求压力,就近请求物理延迟低,配套缓存策略

需求:

        开发模式使用本地第三方库,生产模式下使用CDN加载引入

步骤:

        1.在html中引入第三方库的CDN地址并用模板语法判断

        

        2.配置webpack.config.js中externals外部扩展选项(防止某些import的包被打包)

        3.两种模式下打包观察效果

多页面打包

单页面:

        单个html文件,切换DOM的方式实现不同业务逻辑展示,后续Vue/React会学到

多页面:

        多个html文件,切换页面实现不同业务逻辑展示

需求:

        把内容页面和登录页面一起引入打包

步骤:

        1.准备源码(html,css,js)放入相应位置,并改用模块化语法导出

        2.下载form-serialize包并导入到核心代码中使用

        3.配置webpack.config,js多入口和多页面设置

        4.重新打包观察效果

优化-分隔公共代码

需求:把2个以上页面引用的公共代码提取

步骤:

        1.配置webpack.config.js的splitChunks分隔功能

        2.打包观察效果

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

web开发学习笔记（6.element ui）

web开发学习笔记（6.element ui）

1.安装 2.在app.vue中引入ElementView中的内容 3.表格控件，当页大小发生变化，当当前页发生变化 4.对话框组件 5.将form表单中的数据打印出来 6.当遇到日期选择器得到的数据为昨日时，应该加入 value-format"yyyy-MM-dd"即可避免这个…
阅读更多...
子类的构造函数和析构函数调用顺序

子类的构造函数和析构函数调用顺序

看代码&#xff1a; class A { public:A() { cout << __FUNCTION__ << endl; }~A() { cout << __FUNCTION__ << endl; } };class B { public:B() { cout << __FUNCTION__ << endl; }~B() { cout << __FUNCTION__ << endl; …
阅读更多...
vue 指定区域可拖拽的限定拖拽区域的div（如仅弹窗标题可拖拽的弹窗）

vue 指定区域可拖拽的限定拖拽区域的div（如仅弹窗标题可拖拽的弹窗）

<template><div class"container" ref"container"><div class"drag-box" v-drag><div class"win_head">弹窗标题</div><div class"win_content">弹窗内容</div></div><…
阅读更多...
系统配置dns主从服务器

系统配置dns主从服务器

一、准备两台主机&#xff0c;区分主从 二、完全区域传送 1、主DNS服务器配置 #安装相关的包 [rootoula1 ~]# yum install bind -y#关闭防火墙 [rootoula1 ~]# systemctl stop firewalld [rootoula1 ~]# setenforce 0#修改配置主文件 [rootoula1 ~]# vim /etc/named.conf opt…
阅读更多...
java大数据hadoop2.9.2 Java编写Hadoop分析平均成绩

java大数据hadoop2.9.2 Java编写Hadoop分析平均成绩

1、准备文件&#xff0c;例如score.txt&#xff0c;内容如下&#xff1a; zs k1 88 ls k1 98 ww k1 78 zs k2 88 ls k2 98 ww k2 78 zs k3 88 ls k3 98 ww k3 78 2、创建maven项目 <!-- https://mvnrepository.com/artifact/org.apache.hadoop/hadoop-common --><d…
阅读更多...
【软件测试】学习笔记-精准测试

【软件测试】学习笔记-精准测试

软件测试行业从最开始的手工测试到自动化测试&#xff0c;从黑盒测试到白盒测试&#xff0c;测试理念和技术都发生了日新月异的变化。现如今&#xff0c;几乎所有的软件公司都有一套强大且复杂的自动化测试用例&#xff0c;用来夜以继日地保证产品的正确性和稳定性。 然而&…
阅读更多...
web前端项目-贪吃蛇小游戏【附源码】

web前端项目-贪吃蛇小游戏【附源码】

web前端项目-贪吃蛇小游戏 【贪吃蛇】是一款经典的小游戏&#xff0c;采用HTML、CSS和JavaScript技术进行开发&#xff0c;玩家通过控制一条蛇在地图上移动&#xff0c;蛇的目的是吃掉地图上的食物&#xff0c;并且让自己变得更长。游戏的核心玩法是控制蛇的移动方向和长度&am…
阅读更多...
深度学习记录--梯度检验

深度学习记录--梯度检验

数值逼近 为了对梯度进行检验&#xff0c;需要计算近似误差值来接近梯度 对于单边误差和双边误差公式&#xff0c;其中双边误差与真实梯度相差更小&#xff0c;故一般采用双边误差公式 双边误差 公式&#xff1a; 梯度检验(gradient checking) 对于成本函数&#xff0c;求出…
阅读更多...
微信小程序之组件和API

微信小程序之组件和API

学习的最大理由是想摆脱平庸&#xff0c;早一天就多一份人生的精彩&#xff1b;迟一天就多一天平庸的困扰。各位小伙伴&#xff0c;如果您&#xff1a; 想系统/深入学习某技术知识点… 一个人摸索学习很难坚持&#xff0c;想组团高效学习… 想写博客但无从下手&#xff0c;急需…
阅读更多...
S/MIME电子邮件证书申请指南

S/MIME电子邮件证书申请指南

近年来&#xff0c;邮件安全问题日益突出&#xff0c;电子邮件成为诈骗、勒索软件攻击的重灾区。恶意邮件的占比屡创新高&#xff0c;邮件泄密事件更是比比皆是。在如此严峻的网络安全形势下&#xff0c;使用S/MIME电子邮件证书进行邮件收发是当今最佳的邮件安全解决方案之一。…
阅读更多...
RT-Thread 15. list_timer与软定时器

RT-Thread 15. list_timer与软定时器

1. 代码 void rt_thread_usr1_entry(void *parameter) {/* set LED2 pin mode to output */rt_pin_mode(LED2_PIN, PIN_MODE_OUTPUT);while (1){rt_pin_write(LED2_PIN, PIN_HIGH);rt_thread_mdelay(2000);rt_pin_write(LED2_PIN, PIN_LOW);rt_thread_mdelay(3000);} }int ma…
阅读更多...
Demo: 实现PDF加水印以及自定义水印样式

Demo: 实现PDF加水印以及自定义水印样式

实现PDF加水印以及自定义水印样式 <template><div><button click"previewHandle">预览</button><button click"downFileHandle">下载</button><el-input v-model"watermarkText" /><el-input v-mo…
阅读更多...
class_7: C++引用

class_7: C++引用

//1、引用是给变量取别名&#xff0c;定义的时候必须初始化&#xff0c;且指向一个确定的内存空间&#xff1b; //2、引用实质是指针常量&#xff0c;值可以改变&#xff0c;地址不可改变&#xff0c;即不可重复赋值#include <iostream> using namespace std;//1、引用是…
阅读更多...
阿赵UE学习笔记——10、Blender材质和绘制网格体

阿赵UE学习笔记——10、Blender材质和绘制网格体

阿赵UE学习笔记目录   大家好&#xff0c;我是阿赵。   之前介绍了虚幻引擎的材质和材质实例。这次来介绍一个比较有趣的内置的Blender材质。   在用Unity的时候&#xff0c;我做过一个多通道混合地表贴图的效果&#xff0c;而要做过一个刷顶点颜色混合地表和水面的效果。…
阅读更多...
数学建模--论文

数学建模--论文

内容来自数学建模BOOM&#xff1a;【快速入门】北海&#xff1a;数模建模基础MATLAB入门论文写作数学模型与算法(推荐数模美赛国赛小白零基础必看教程)_哔哩哔哩_bilibili 目录 一、论文整体模版 1.整体框架 2.示例 二、标题 1.标题主题事项 三、摘要 1.摘要三要素&am…
阅读更多...
Linux系统：yum仓库

Linux系统：yum仓库

目录 一、yum 1、yum概述 2、yum仓库 3、yum实现过程原理 二、yum配置文件详解 1、主配置文件 2、yum仓库设置文件 3、yum日志文件 三、yum命令详解 1、查询 1.1 yum list [软件名] 1.2 yum info [软件名] 1.3 yum search <关键词> 1.4 yum provides <关…
阅读更多...
无重复字符的最长子串[中等]

无重复字符的最长子串[中等]

优质博文&#xff1a;IT-BLOG-CN 一、题目 给定一个字符串s&#xff0c;请你找出其中不含有重复字符的最长子串的长度。 示例 1: 输入: s "abcabcbb" 输出: 3 解释: 因为无重复字符的最长子串是"abc"&#xff0c;所以其长度为3。 示例 2: 输入: s &…
阅读更多...
Verilog刷题笔记17

Verilog刷题笔记17

题目&#xff1a; For hardware synthesis, there are two types of always blocks that are relevant: Combinational: always (*) Clocked: always (posedge clk) Clocked always blocks create a blob of combinational logic just like combinational always blocks, but …
阅读更多...
el-table中设置第一列为多选框,且多选框动态禁用

el-table中设置第一列为多选框,且多选框动态禁用

给el-table第一列写成以下代码: <el-table-columntype"selection"width"55"></el-table-column> 效果: 多选框动态禁用 el-table中设置了 type"selection"&#xff0c;但是由于部分数据是已经处理过的&#xff0c;不允许选中&…
阅读更多...
css-盒子等样式学习

css-盒子等样式学习

盒子居中&#xff0c;继承外层盒子的宽高 兼容性&#xff08;border-box&#xff09;将边框收到盒子内部 初始化div 不用管box-setting content-box 还原 创建为一个类 &#xff0c;让所有需要还原的类 进行继承 padding 用法表示margin上下左右边距 body 外边距&…
阅读更多...
最新文章

Copyright @ 2022~2023