Webpack学习笔记

十一、WebPack简介
  • 定义

在这里插入图片描述

  • 注释:

    • 静态模块:指的是编写代码过程中的,html,css,js,图片等固定内容的文件
    • 打包:把静态模块内容,压缩,整合,转译等(前端工程化)
      • less/sass转成css代码
      • 把ES6+降级成ES5
      • 支持多种模块标准语法
  • 使用:

在这里插入图片描述

webpack打包默认出口是dist下的main.js

十二、修改webpack打包出口和入口
1、入口
  • 默认值:./src/index.js
  • 修改:可以在webpack.configuration中配置entry属性,来指定一个或多个不同的入口起点

在这里插入图片描述

2、出口
  • 默认值:./dist/main.js,其他生成文件默认放置在dist文件夹中
  • 修改:在配置中指定一个output字段,来配置这些处理过程

在这里插入图片描述

3、步骤
  • 项目根目录,新建webpack.config.js配置文件
  • 导出配置对象,配置入口,出口文件的路径

在这里插入图片描述

十三、webpack自动生成html文件
  • 插件:html-webpack-plugin:在Webpack打包时生成html文件

  • 步骤

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

    在这里插入图片描述

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

    在这里插入图片描述

    • 3、重新打包观察效果
十四、webpack打包css代码
  • 加载器css-loader:解析css代码
  • 加载器style-loader:把解析后的css代码插入到html document中

在这里插入图片描述

  • 步骤
    • 1、准备css文件代码引入到入口文件
    • 2、下载css-loader和style-loader本地软件包
    • 3、配置webpack.config.js让webpack拥有该加载器功能
十五、优化-提取css代码
  • 步骤:下载mini-css-extract-plugin本地软件包

在这里插入图片描述

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

在这里插入图片描述

  • 打包后观察效果

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

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

十六、优化-压缩过程

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

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

  • 步骤:

    • 1、下载插件

    在这里插入图片描述

    • 2、配置webpack.config.js

    在这里插入图片描述

    • 3、重新打包观察结果
十七、webpack打包less代码
  • 需要加载器less-loader

  • 使用方法:

    • 1、安装less和less-loader

    在这里插入图片描述

    • 2、配置webpack.config.js

    在这里插入图片描述

    十八、webpack打包图片

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

  • 步骤:

    • 1、配置webpack.config.js让webpack具有打包图片功能
      • 1、占位符hash对模块内容做算法计算,得到映射的数组字母组合的字符串
      • 2、占位符ext使用当前模块原本的占位符,例如.png/.jpg等字符串
      • 3、占位符query保留引入文件时代码中查询参数(只有URL下生效)

    在这里插入图片描述

    • 2、注意:判断临界值默认为8kb
      • 1、大于8kb文件:发送一个单独的文件并导出URL地址
      • 2、小于8kb文件:导出一个data URL(base64字符串)

注意:注意js中引入本地图片资源用import方式

十九、搭建开发环境

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

  • 开发环境:配置webpack-dev-server快速开发程序
  • 作用:启动web服务,自动检测代码变化,热更新到网页

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

  • 步骤:

    • 1、下载webpack-dev-server软件包到当前目录

    在这里插入图片描述

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

    在这里插入图片描述

    • 3、使用npm run dev来启动开发服务器,试试热更新效果
  • 注意:

    • 1、webpack-dev-server借助http模块创建8080默认Web服务
    • 2、默认以public文件夹作为服务器根目录
    • 3、webpack-dev-server根据配置,打包相关代码在内存当中,以output.path的值作为服务器根目录 (所以可以自己拼接访问dist目录下内容)
二十、开发模式
模式名称模式名字特点场景
开发模式development调试代码,实时加载,模块热替换等本地开发
生产模式production压缩代码,资源优化,更轻量等打包上线
  • 设置:

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

    在这里插入图片描述

    • 方式2:在package.json命令行设置mode参数(–mode= 命令行设置)

在这里插入图片描述

  • 命令行设置的优先级高于配置文件中的,推荐命令行设置
二十一、打包模式的应用
  • 需求:在开发模式下用style-loader内嵌更快,在生产模式下提取css代码(即开发用style-loader,打包用css提取)

  • 方案:

    • 1、webbpack.config.js配置导出函数,但是局限性大(只接受两种模式)
    • 2、借助cross-env(跨平台通用)包命令,设置参数区分环境
  • 步骤:

    • 1、下载cross-env软件包到当前项目

    在这里插入图片描述

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

    在这里插入图片描述

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

    在这里插入图片描述

    • 4、重新打包观察两种配置区别
二十二、前端–注入环境变量
  • 需求:前端项目中,开发模式下打印语句生效,生产模式下打印语句失效

  • 问题:cross-env设置的旨在Node.js环境生效,前端代码无法访问process.env.NODE_ENV

  • 解决:使用webpack内置的DefinePlugin插件

在这里插入图片描述

作用:在编译时,将前端匹配的变量名,替换成对应的值

二十三、开发环境调错–source map
  • 问题:代码被压缩和混淆,无法正确定源代码位置
  • 解决:source map可以准确追踪error和warning在原始代码的位置

设置:webpack.config.js配置devtool选项

在这里插入图片描述

inline-source-map:会将源码位置信息一起打包在js文件被

  • 注意:source map仅适用于开发环境,不要在生产环境中使用
二十四、webpack解析别名alias
  • 解析别名:配置模块如何解析,创建import引入路径的别名,来确保模块引入变得更简单
  • 例如:原来路径如下图所示,比较长且相对路径不安全

在这里插入图片描述

  • 解决方式:在webpack.config.js中配置解析别名@来表示src绝对路径

在这里插入图片描述

在这里插入图片描述

二十五、优化-CDN使用
  • CDN定义:内容分发网络,指的是一组分布在各个地区的服务器

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

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

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

在这里插入图片描述

  • 步骤:

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

    在这里插入图片描述

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

在这里插入图片描述

前端环境变量引入使得生产模式下CDN生效,开发模式下CDN失效

  • 注意:CDN查询网站bootCDN
  • form-serialize:unpkg.com可以查到
二十六、多页面打包
  • 单页面:单个html文件,切换DOM的方式实现不同的业务逻辑展示,后续Vue/React会学到
  • 多页面:多个html文件,切换页面实现不同的业务逻辑展示
  • 需求:把黑马头条-数据管理平台-内容页面一起引入打包使用
  • 步骤
    • 1、准备源码放入相应位置,并改用模块化语法导出
    • 2、下载form-serialize包并导入到核心代码中使用
    • 3、配置webpack.config.js多入口和多页面的设置

在这里插入图片描述

占位符./【name】/可以替换为文件名,避免多个入口文件打包到同一个文件夹

二十七、优化-分割公共代码
  • 需求:把2格以上页面引用的公共代码提取

  • 步骤:

    • 1、配置webpack.config.js的splitChunks分割功能

    在这里插入图片描述

    • 2、打包观察效果
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值