vue 从入门到入土---复习 webpack

目录

前端工程化

wbepack的基本使用

 webpack中的插件

 webpack中的loader

 打包发布

Socure Map

总结

---

前端工程化

@1.了解前端工程化概念

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

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

@2.前端工程化的好处主要体现在如下两个方面

1. 前端工程化让前端开发自成体系,覆盖了前端项目从创建到部署的方方面面
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中有如下的默认约定

1. 默认的打包入口文件为 src-=>index.js
2. 默认的输出文件路径为 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的作用:精准的定位到错误行,并显示源代码,方便开发者调试源码中的错误