目录
前端工程化
@1.了解前端工程化概念
前端工程化指的是,在企业级的前端项目开发中,把前端所需要的开发工具,技术,流程,经验等进行规范化,标准化,最终落实在细节上,就是实现前端的四个现代化
- 模块化(js模块化,css模块化,其他资源模块化)
- 组件化(复用现有的UI结构,样式,行为)
- 规范化:(目录结构的划分,编码规范化,接口规范化,文档规范化,Git分支管理)
- 自动化(自动化构建,自动化部署,自动化测试)
@2.前端工程化的好处主要体现在如下两个方面
- 前端工程化让前端开发自成体系,覆盖了前端项目从创建到部署的方方面面
- 最大程度的提高了开发效率,降低了技术选型,前后端联调,等带来的沟通协调成本
@3.前端工程化的解决方案: geunt gulp webpack parcel
wbepack的基本使用
@1.什么是webpack?
概念:webpack是前端项目工程化的具体解决方案,
主要功能:他提供了友好的前端模块化开发支持,以及代码压缩混淆,处理浏览器端JavaScript的兼容性,性能优化等强大的功能
好处:让程序员把工作重心放在具体的功能实现上,提高了前端的开发效率和项目的可维护性
注意:目前企业级的项目开发中,绝大多数的项目都是基于webpack进行打包构建的
@2.创建列表隔行变色项目
- 新建项目空白目录,并运行 npm init -y 命令,初始化包管理文件package.json
- 新建src源代码目录
- 新建src--->index.html首页 和src-index-js脚本文件
- 初始化首页基本结构
- 运行 npm install jQuery 安装 jQuery
- 通过es6模块化的方式导入 jQuery 实现列表隔行变色
@3 如何在项目中安装webpack
在终端运行如下命令,安装webpack相关的两个包
?@4 在项目中配置webpack
在项目根目录中 创建名为 webpack. config.js 的webpack配置文件,并初始化如下的基本配置:
?在package.json 的 scripts 节点下 新增dev脚本如下
?@4.1 mode的可选值
1.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 的配置文件中 通过 entery 节点指定 打包的入口 通过 output 节点指定打包的出口 实例代码如下
?webpack中的插件
@1 webpack插件的作用
通过 安装和配置第三方的插件,可以扩展webpack的能力,从而让webpack 用起来更加方便,最常用的 webpack 插件 有如下两个
- webpack-dev-server :每当修改了源代码,webpack会自动进行项目的打包和构建
- html-webpack-plugin:html插件(类似 模板引擎插件),可以通过插件自定制index.html的页面内容
@2 webpack-dev-server
webpack-dev-server可以让webpack监听目录源代码的变化,从而进行自动打包构造
@2.1 安装webpack-dev-server
运行如下代码命令,即可在项目中安装此插件
?@2.2 配置webpack-dev-server
1.修改package.json --.scripts中的dev命令
?2.在次运行 npm run dev命令 重新进行项目的打包
3.在浏览器中访问 http://localhost;8080地址,查看自动打包效果
注意:webpack-dev-server会启动一个实时打包的http服务器
@ 2.3打包生成的文件哪儿去了?
1.不配置webpack -dev-server 的情况下 ,webpack打包生成的文件会放在实际的物理磁盘上
- 严格遵守开发者在 webpack config.js 中指定位置
- 根据output节点指定路径存放
2.配置了webpack -dev-server 之后,打包后的文件存放在了内存中
- 不在根据output节点指定路径存放在实际的物理磁盘上,
- 提高了实时打包的性能,因为内存比物理磁盘块很多
@2.4 生成到内存中的文件该如何访问
生成到内存中的文件,默认放到了项目的根目录中,而且是虚拟的,不可见的
@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页面的底部 自动注入了打包的bumdle.js文件
@4dev Server节点
在webpack config.js配置文件中可以通过devServer节点对webpack-dev-server插件进行更多配置
?webpack中的loader
@1.loader概述
在实际开发过程中webpack默认只能打包处理以.js后缀名结尾的模块其他非.js后缀名结尾的模块,
webpack默认处理不了的需要调用loade加载器才能正常打包,否则会报错
loader:加载器的作用:协助webpack,打包处理特定的文件模块
- css-loader:可以打包处理css相关的文件
- less-loader可以打包处理less相关的文件
- babel-loader可以打包处理 webpack无法处理的高级js语法
@2 loader的调用过程
@3 打包处理css文件
1.运行 npm i style-loader@2.0.0 css-loader@5.0.1 -D 安装处理css文件的loader
2.在 webpack.config.js中的module-->rules数组中 添加loader规则如下
?其中 test表示匹配的文件类型,use表示要调用的loader
注意:use数组中指定的loader顺序是固定的,多个loader的调用顺序是从后往前调用
@4 打包处理less文件
1. 运行 npm i less loader@7.1.0 less@3.12.2 -D 命令
2.在 webpack.config.js中的module-->rules数组中 添加loader规则如下
?@5.打包处理样式变中的与url路径相关的文件
1.运行 npm i url-loader@4.1.1 file-loader@6.2.0 -D 命令
2.在 webpack.config.js中的module-->rules数组中 添加loader规则如下
?其中问号之后的是loader的参数项
limit用来指定图片大小,单位字节(byte), 只有<limt大小的图片才会被转为base64格式的图片
@5.1 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-clss-properties
@6.2配置babel-loader
在 webpack.config.js中的module-->rules数组中 添加loader规则如下
?打包发布
@1为什么要打包发布
项目开发完成之后,使用webpack对项目进行打包发布的主要原因有以下两点
- 1.在开发环境下打包生成的文件,存放在内存中,无法获取最后打包生成的文件
- 2.开发环境下 打包生成的文件不会进行代码压缩和性能优化
@2配置webpack的打包部署
咋package.json文件中,文件的scripts节点下 新增build命令如下
?--model是一个参数项,用来指定webpack的运行模式,production代表生产环境下,会对打包生成的文件进行代码压缩和性能优化
注意通过--mode 指定的参数项,会覆盖webpack.config.js中的mode选项
@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加载
- 配置组件按需加载
- 开启路由懒加载
- 自定制首页内容
Socure 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.1定位行数且暴露源代码
在生产环境下如果只想定位报错行数的同时,展示报错的具体源代码此时可以将devtool的值设置为 source-map 采取此选项后,你应该将服务器设置为不允许普通用户访问source-map 文件
@5Source Map的最佳实践
开发环境下
- 建议把devtool 的值设置为 eval-source-map?
- 好处:可以精准的定位到错误行
生产环境下
- 建议关闭Source Map或将devtool的值设置为nosources-source-map?
- 好处:防止源码泄露,提高网站安全性
总结
实际开发中使用命令行工具(俗称CLI)一键生成带有webpack的项目,开箱即用,所有的webpack配置项都是现成的,我们只需要知道webpack的基本使用即可
- 基本使用:安装 webpack.config.js 修改打包入口
- 常用的plugin插件 webpack-dev-server html-webpackplugin
- 常用的loader loader的作用,loader的调用过程
- Source Map的作用:精准的定位到错误行,并显示源代码,方便开发者调试源码中的错误