前端工程化与webpack

一、目标

  • 能够说出什么是前端工程化
  • 能够说出webpack的作用
  • 能够掌握webpack的基本使用
  • 了解常用plugin的基本使用
  • 了解常用loader的基本使用
  • 能够说出Source Map的作用

二、目录

  1. 前端工程化
  2. webpack的基本使用
  3. webpack中的插件
  4. webpack中的loader
  5. 打包发布
  6. Source Map

1.前端工程化


1.1小白眼中的前端开发vs实际的前端开发

实际的前端开发:

  • 模块化(js的模块化、css的模块化、其他资源的模块化)
  • 组件化(复用现有的UI结构、样式、行为)
  • 规范化(目录结构的划分、编码规范化、接口规范化、文档规范化、GIt分支管理)
  • 自动化 (自动化构建、自动部署、自动化测试)

2.什么是前端工程化

前端工程化指的是:在企业级的前端项目开发中,把前端开发所需的工具、技术、流程、经验等进行规范化、标准.化。最终落实到细节上,就是实现前端的“4个现代化

模块化、组件化、规范化、自动化

3.前端工程化的好处

①前端工程化让前端开发能够“自成体系”,覆盖了前端项目从创建到部署的方方面面

②最大程度的提高了前端的开发效率,降低了技术选型、前后端联调等带来的协调沟通成本。

4.前端工程化的解决方案

最早期的前端工程化解决方案:

  • grunt(https://www.gruntjs.net/)
  • gulp(https://www.gulpjs.cn/)

目前主流的前端工程化解决方案:

  • webpack (https://www.webpackjs.com/)
  • parcel (https://zh.parceljs.org/)

2.webpack的基本使用

2.1什么是webpack

概念:webpack是前端项目工程化的具体解决方案。

主要功能:它提供了友好的前端模块化开发支持,以及代码压缩混淆、处理浏览器端JavaScript的兼容性、性能优化等强大的功能。

好处:让程序员把工作的重心放到具体功能的实现上,提高了前端开发效率和项目的可维护性。

注意:目前企业级的前端项目开发中,绝大多数的项目都是基于webpack进行打包构建的。

2.2创建列表隔行变色项目

2.3在项目中安装webpack

在终端 运行如下的命令,安装webpack相关的两个包:

2.4在项目中配置webpack

①在项目根目录中,创建名为webpack.config.js的webpack配置文件,并初始化如下的基本配置:

 ②在package.json的acripts节点下,新增dev脚本如下:

③在终端中运行npm run dev命令,启动wbpack进行项目的打包构建。 

④将js引入路径进行更换,更换成生成的兼容性的.js文件

2.webpack的基本使用


4.1mode的可选值

mode节点的可选值有两个,分别是:

①development

  • 开发环境
  • 不会对打包生成的文件进行代码压缩和性能优化
  • 打包速度快,适合在开发阶段使用

②production

  • 生产环境
  • 会对打包生成的文件进行代码压缩性能优化
  • 打包速度很慢,仅适合在项目发布阶段使用

4.2 webpack.config.js文件的使用

webpack.config.js是webpack的配置文件。webpack在真正开始打包构建之前,会先读取这个配置文件,从而基于给定的配置,对项目进行大包。

注意:由于webpack是基于node.js开发出来的打包工具,因此在它的配置文件中,支持使用node.js相关的语法和模块进行webpack的个性化配置。

4.3webpack中的默认约定

在webpack中有如下的默认约定

①默认的打包入口文件为src->index.js

②默认的输出文件路径为dist->main.js

注意:可以在webpack.config.js中修改打包的默认约定

4.4自定义打包的入口与出口

在webpack.config.js配置文件中,通过entry节点指定打包的入口。通过output节点指定打包的出口

实例代码如下:

 webpack.config.js配置如下:

const path = require('path')
module.exports = {mode: 'development', //development  production//指定打包入口entry: path.join(__dirname, './src/index.js'),//指定打包出口output: {//表示输出文件的存放路径path: path.join(__dirname, './dist'),//输出文件的名称filename: 'bundle.js'}
}

当修改完代码后,必须重新 npm run (package.json中的scripts)

3.webpack中的插件


1.webpack插件的作用

通过安装和配置第三方的插件,可以拓展webpack的能力,从而让webpack用起来更方便。最常用的webpack插件有如下两个:

webpack-dev-server

  • 类似于node.js阶段用到的nodemon工具
  • 每当修改了源代码,webpack会自动进行项目的打包和构建

html-webpack-plugin

  • webpack中的HTML插件(类似于一个模板引擎插件)
  • 可以通过此插件自定制index.html页面的内容

2.webpack-dev-server

webpack-dec-server可以让webpack监听项目源代码的变化,从而进行自动打包构建

2.1安装webpack-dev-server

运行如下命令:

 2.2 配置webpack-dev-server

①修改package.json->scripts中的dev命令如下:

 ②再次运行npm run dev命令,重新进行项目的打包

③在浏览器中访问http://localhost:8080地址。查看自动打包效果

注意:webpack-dev-server会启动一个实时打包的http服务器

2.3打包生成的文件去哪了?

①不配置webpack-dev-server的情况下,webpack打包生成的文件,会存放到实际的物理磁盘上

  • 严格遵守开发者在webpack.config.js中指定配置
  • 根据output节点指定路径进行存放

②配置了webpack-dev-server之后,打包生成的文件存放到了内存中

  • 不再根据output节点指定的路径,存放到实际的物理磁盘上
  • 提高了实时打包输出的性能,因为内存比物理磁盘速度快很多

2.4 生成到内存中的文件该如何访问?

webpack-dev-server生成到内存中的文件,默认放到了项目的根目录中,而且是虚拟的、不可见的。

3.html-webpack-plugin        

html-webpack-plugin是webpack中的HTML插件,可以通过此插件自定制index.html页面的内容

需求;通过html-webpack-plugin插件,将src目录下的index.html首页,复制到项目根目录中一份

3.1安装html-webpack-plugin

 3.2配置html-webpack-plugin

 3.3 解惑html-webpack-plugin

①通过HTML插件复制到项目根目录中的index.html页面,也被放到了内存中

②HTML插件在生成的index.html页面的底部自动注入了打包的bundle.js文件

(无需再手动引入样式)

tip:当我们删除dist文件不影响我们观看页面效果,因为我们已经实时代码

4.devServer节点

在webpack.config.js配置文件中,可以通过devServer节点对webpack-dev-server插件进行更多的配置,示例代码如下:

4. webpack中的loader


1.loader概述

在实际开发过程中,webpack默认只能打包处理以.js后缀名结尾的模块。其他非.js后缀名结尾的模块。webpack默认处理不了,需要调用loader加载器才可以正常打包,否则会报错!

loder加载器的作用:协助webpack打包处理待定的文件模块。比如:

  • css-loader可以打包处理.css相关的文件
  • less-loader可以打包处理.less相关的文件
  • babel-loader可以打包处理webpack无法处理的高级JS语法

2.loader的调用过程

3.打包处理CSS文件 

webpack中一切皆模块。在.js文件中导入.css样式后会报错,webpack只能打包处理.js结尾的文件,当遇到非.js结尾的文件,会寻找第三方处理。

①运行npm i style-loader@2.0.0 css-loader@5.0.1 -D命令,安装处理css文件的loader

②在webpack.config.js的module->rules数组中,添加loader规则如下:

 其中,text表示匹配的文件类型use表示对应要调用的loader

注意:

  • use数组中指定的loader顺序是固定的
  • 多个loader的调用顺序是:从后往前调用

4.打包处理less文件

当导入.less文件时,需要安装loader

①运行npm i less-loader@7.1.0 less@3.12.2 -D命令

②在webpack.config.js的module->rules数组中,添加loader规则如下:

 5.打包处理样式表中与url路径相关的文件

①运行npm i url-loader@4.1.1 file-loader@6.2.0 -D命令

②在webpack.config.js的module->rules数组中,添加loader规则如下:

样式表中引用太多的小图片会导致网页发起一些不必要的网络请求,我们可以把那些小图片转成base64的格式,如何控制哪些图片转,哪些图片不转,现在用到urk-loder参数项了(limit代表图片的体积,只有这个图片小于或等于22229时,图片才会转成base64)。

其中?之后的是loader的参数项:

  • limit用来指定图片的大小,单位是字节(byte)
  • 只有<=limit大小的图片,才会被转成base64格式的图片。

5.1 loader的另一种配置方式

带参数项的loader还可以通过对象的方式进行配置:

 6.打包处理js文件中的高级语法

webpack只能打包处理一部分高级的javaScript语法。对于那些webpack无法处理的高级js语法,需要借助于babel-loader进行打包处理。例如webpack无法处理下面的javascript代码:

 6.1安装babel-loader相关的包

运行如下的命令安装对应的依赖吧:

包的名称及版本号列表如下(红色的是包的名称、黑色是包的版本号);

  • babel-loader@8.2.1
  • @babel/core@7.12.3
  • @babel/plugin-proposal-class-properties@7.12.1 

6.2 配置babel-loader

在webpack.config.js的module->rules数组中,添加loader规则如下:

 5.打包发布

1.为什么要打包发布

项目开发完成之后,使用webpack对项目进行打包发布的主要原因有以下两点:

①开发环境下,打包生成的文件存放于内存中,无法获取到最终打包生成的文件。

②开发环境下,打包生成的文件不会进行代码压缩和性能优化

2.配置webpack的打包发布

package.json文件的scripts节点下,新增build命令如下:

 --model是一个参数项,用来指定webpack的运行模式。production代表生产环境,会对打包生成的文件进行代码压缩性能优化

注意:通过--model指定的参数项,会覆盖webpack.config.js中的model选项。

3.把javascript文件统一生成到js目录中

webpack.config.js配置文件的output节点中,进行如下的配置:

 4.把图片文件统一生成到image目录中

修改webpack.config.js中的url-loader配置项,新增outputPath选项即可指定图片文件的输出路径:

5.自动清理dist目录下的旧文件

为了在 每次打包发布时自动清理掉dist目录中的旧文件,可以安装并配置clean-webpack-plugin插件:

 6.企业级项目的打包发布

企业级的项目在进行打包发布时,远比刚才的方式要复杂的多,主要的发布流程如下:

  • 生成打包报告,根据报告分析具体的优化方案
  • Tree-Shaking
  • 为第三方库启用CDN加载
  • 配置组件的按需加载
  • 开启路由懒加载
  • 自定制首页内容

6.Source Map

1.生产环境遇到的问题

前端项目在投入生产环境之前,都需要对JavaScript源代码进行压缩混淆,从而减小文件的体积,提高文件的加载效率。此时就不可避免的产生了另一个问题:

对压缩混淆之后的代码除错,是一件极其困难的事情。

  • 变量被替换成了没有任何语义的名称
  • 空行和注释被踢出 

2.什么是Source Map

Source Map就是一个信息文件,里面存储着位置信息。也就是说,Source Map文件中存储着代码压缩混淆前后对应关系

有了它,出错的时候,除错工具直接显示原始代码,而不是转换后的代码,能欧极大地方便后期的调试。

3.webpack开发环境下的Source Map

开发环境下,webpack默认启用了Source Map功能。当程序运行出错时,可以直接在控制台提示错误行的位置,并定位到具体的源代码

3.1默认Source Map的问题

开发环境下默认生成的Source Map,记录的是生成后的代码的位置。会导致运行时报错的行数源代码的行数不一致的问题。示意图如下:

 

3.2解决默认Source Map的问题 

开发环境下,推荐在webpack.config.js中添加如下的配置,即可保证运行时报错的行数与源代码的行数保持一致;

4.webpack生产环境下的Source Map

 在生产环境下,如果省略了devtool选项,则最终生成的文件中不包含Source Map。这能够防止原始代码通过Source Map的形式暴露给别有所图之人。

 4.1只定位行数不暴露原码

在生产环境下,如果只想定位报错的具体行数,且不想暴露源码。此时可以将devtool的值设置为nosources-source-map。实际效果如图所示:

 4.2定位行数且暴露源码

在生产环境下,如果想在定位报错行数的同时,展示具体报错的源码。此时可以将devtool的值设置为source-map。实际效果如图所示:

5.Source Map的最佳实践

 ①开发环境下:

  • 建议把devtool的值设置为eval-source-map
  • 好处:可以精准定位到具体的错误行

②生产环境下:

  • 建议关闭Source Map或将devtool的值设置为nosource-source-map
  • 好处:防止源码泄露,提高网站的安全性

 实际开发中需要自己配置webpack吗?


答案:不需要

  • 实际开发中会使用命令行工具(俗称CLI一键生成带有webpack的项目
  • 开箱即用,所有webpack配置项都是现成的!
  • 我们只需要知道webpack中的基本概念即可!

 

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

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

相关文章

UDP数据报套接字编程

目录 一、DatagramSocket API 1.1、DatagramSocket构造方法 1.2、DatagramSocket方法 二、DatagramPacket API 2.1、DatagramPacket构造方法 2.2、DatagramPacket方法 三、示例 实现字典查询器 一、DatagramSocket API DatagramSocket是UDP Socket,用于发送和接收U…

⌈C++⌋深度剖析构造、拷贝构造与赋值运算符重载——深浅拷贝、explicit、类型转换等

目录 一、认识拷贝构造函数 1、什么是拷贝构造 2、深拷贝与浅拷贝 3、编译器可以绕过拷贝构造函数&#xff08;C Primer P442&#xff09; 4、explicit修饰 二、认识赋值运算符重载 1、赋值运算符重载格式 2、默认赋值运算符重载 3、赋值运算符都必须定义为成员函数 …

【简单认识LVS+Keepalived负载均衡高可用群集】

文章目录 一、Keepalived高可用详解1、简介2、原理3、Keepalived体系主要模块及其作用&#xff1a; 二、LVSKeepalived 高可用群集部署实例1.配置NFS共享存储器2.配置节点web服务&#xff08;两台的配置相同&#xff09;&#xff08;1&#xff09;配置虚拟 IP 地址&#xff08;…

Java中Map中10w条数据用什么循环性能最好呢?

加油&#xff0c;新时代打工人&#xff01; 1、java中List集合三种获取集合元素方式 2、Java中Map使用增强for循环和迭代器获取key和value 选择合适的循环方式&#xff0c;让性能最优&#xff01; public class Test2 {public static void main(String[] args) {//初始化 10w…

如何获取铁粉

忽然发现我的铁粉从100变成了540&#xff0c;分享下我的经验&#xff0c;我觉得可能是我的机器人经常互动的问题&#xff0c;结合自己的看法和平台大佬的想法一些进行了梳理&#xff1a; 在当今社交媒体时代&#xff0c;吸引和保留铁粉&#xff08;忠实粉丝&#xff09;对于个…

面试题更新之-DOCTYPE html相关问题

文章目录 <!DOCTYPE html>是什么&#xff1f;为什么要在html文件开头加上一个<!DOCTYPE html>DOCTYPE的作用&#xff0c;严格与混杂模式的区别&#xff0c;有何意义HTML5为什么只需要写<!DOCTYPE HTML> 是什么&#xff1f; 是HTML文档的文档类型声明&#xf…

实战攻防之积极防御体系建设 | 中睿天下受邀参与诸子云沙龙

7月8日&#xff0c;中睿天下受邀参与由诸子云举办的“网络与数据安全”主题沙龙&#xff0c;中睿天下技术经理徐丹丹就《实战攻防之积极防御体系建设》这一主题进行了分享交流。 本次沙龙由南京分会会长宋士明主持&#xff0c;活动邀请到BASF、江苏省联社、华泰证券、宁证期货、…

【kubernetes系列】Kubernetes之ServiceAccount

概述 Service Account是什么呢&#xff0c;顾名思义&#xff0c;服务账号&#xff0c;一种给服务使用的账号&#xff0c;它不是给Kubernetes的集群的用户&#xff08;系统管理员、运维人员、租户用户等&#xff09;使用&#xff0c;而是给运行在Pod里的进程用的&#xff0c;它…

flink启动报错Failed to construct kafka producer

flink local模式下启动 sink2kafka报错&#xff0c;具体报错如下 apache.kafka.common.KafkaException: Failed to construct kafka producerat org.apache.kafka.clients.producer.KafkaProducer.<init>(KafkaProducer.java:432)at org.apache.kafka.clients.producer.…

wps如何加载mathtype和Endnote

为了支持国产化软件&#xff0c;弃用office套装&#xff0c;现在改用wps办公软件&#xff0c;但是写作科技论文的时候还是会出现很多的不方便&#xff0c;比如文献引用、公式排版编号等等。尽管wps自带了公式编辑器&#xff0c;然鹅这可太不方便了&#xff0c;因此把几个技巧总…

谈谈你对 binder 的理解?

面试官提了一个问题&#xff0c;我们来看看 &#x1f60e;、&#x1f628; 和 &#x1f914;️ 三位同学的表现如何吧 &#x1f60e; 自认为无所不知&#xff0c;水平已达应用开发天花板&#xff0c;目前月薪 10k 面试官️&#xff1a;谈谈你对 binder 的理解 &#x1f60e;&a…

驱动开发-day10

驱动代码&#xff1a; #include <linux/cdev.h> #include <linux/device.h> #include <linux/fs.h> #include <linux/gpio.h> #include <linux/init.h> #include <linux/interrupt.h> #include <linux/mod_devicetable.h> #include …