webpack学习笔记——模块打包工具

一、webpack基本概念

问题1: 以前写完的网站, 文件很多, 体积很大?

问题2: 有没有一种 自动 整合, 压缩, 剔除无用代码技术?

是不是让浏览器加载资源更快呀 ?

我们为什么学习webpack

        减少文件数量

        缩减代码体积

        提高浏览器打开的速度

问题1: 我们手动能否压缩代码呢?

问题2: 能否找个模块来, 翻译, 压缩, 打包合并代码?

1.1 webpack基本概述

webpack本质是, 一个第三方模块包, 用于分析, 并打包代码

        支持所有类型文件的打包

        支持less/sass => css

        支持ES6/7/8 => ES5

        压缩代码, 提高加载速度

什么是webpack呢? 作用是什么? 目的是?

        它是一个模块包

        识别代码, 翻译, 压缩, 整合打包

        提高打开网站的速度

二、webpack使用步骤

问题1: webpack既然是个模块包，需要下载吗?
问题2: 在一个文件夹里下载包? 需要不需要有人记录呢?

2.1 环境准备

① 初始化包环境

初始化文件夹包环境, 得到package.json文件

base为环境名字（可以随便取名字，包名），author为项目作者

② 安装依赖包

下载webpack等模块包

-D 将安装的 webpack 和 webpack-cli 两个包记录到开发环境中

③ 配置scripts (自定义命令)

在package.json自定义命令, 为打包做准备

2.2 案例: webpack基础使用

问题: 如何把2个js文件, 打包整合到一起并压缩呢?

webpack如何使用

        默认src/index.js – 打包入口文件

        需要引入到入口的文件才会参与打包

        执行package.json里build命令, 执行webpack打包命令

        默认输出dist/main.js的打包结果

2.3 案例: webpack再次打包

问题: 如果以后代码增加了, 如何再打包呢?

代码增加后, 如何打包呢?

        确保在src/index.js引入和使用

        重新执行yarn build打包命令

三、webpack的配置

 配置文档: webpack配置文档

问题: 能否更改webpack打包默认的入口和出口?

        新建webpack.config.js

        填入配置

        修改入口文件名

        打包观察效果

注意: webpack基于node, 所以导出, 遵守CommonJS规范

如何修改webpack入口和出口

        新建webpack.config.js (webpack默认配置文件名)

        通过entry设置入口文件路径

        通过output对象设置出口路径和文件名

3.1 yarn build执行流程图

重点: 所有要被打包的资源都要跟入口产生直接/间接的引用关系

一句话总结下`yarn build`后干了什么

        执行webpack命令, 找到配置文件, 入口和依赖关系, 打包代码输出到指定位置

3.2 案例-隔行变色

问题: 打包后的js能不能应用于网页上呢?

步骤：

① 从0准备环境, 初始化包环境, 下载webpack和webpack-cli包, 配置自定义命令build

② yarn下载jquery, 新建public/index.html,准备一些li标签

        yarn add jQuery

③ src/main.js 引入jquery, 编写功能代码

       

④ 执行打包命令

⑤ 复制public/index.html到dist/, 然后引入打包后的js, 运行网页观察效果

重点: webpack打包后的js引入到html中使用

用yarn下的包, 如何作用在前端项目中?

        借助 webpack, 把模块和代码打包

        把 js 文件引入到 html 执行查看效果

问题: 打包后还得自己手动建立html文件, 太繁琐

3.3 html-webpack-plugin插件

配置文档: webpack-plugin插件配置文档

① 下载插件

② webpack.config.js添加配置

重要: webpack就像一个人, webpack.config.js是人物属性, 给它穿什么装备它就干什么活 

如何让webpack打包时, 自动生成html文件呢?

        依赖html-webpack-plugin插件, yarn下载此插件

        在webpack.config.js配置写入即可

3.4 webpack打包css文件

问题: 写个css文件, 去除li的圆点, 让webpack一起打包?

目标：编写css代码, 让webpack打包

        新建 - src/css/index.css

        编写去除li圆点样式代码

        (重要) 一定要引入到入口才会被webpack打包

        执行打包命令观察效果

报错: 因为webpack默认只能处理js文件

为什么webpack打包css文件会报错呢?

        webpack默认只能识别js类型的文件

问题: 那如何才能让webpack识别和打包css文件呢?

3.5 webpack-使用加载器

css-loader 文档: https://webpack.docschina.org/loaders/css-loader/

style-loader文档: https://webpack.docschina.org/loaders/style-loader/

css-loader 让webpack能处理css类型文件

style-loader 把css插入到DOM中

① 下载加载器

② webpack.config.js配置

③ 打包观察效果

webpack如何支持css打包? 打包后样式在哪里? 如何生效?

        依赖css-loader和style-loader

        css代码被打包进js文件中

        style-loader会把css代码插入到head下style标签内

3.6 webpack处理less文件

问题: webpack能否识别打包less类型文件呢?

less-loader文档: https://webpack.docschina.org/loaders/less-loader/

less-loader作用: 识别less文件

less 作用: 将less编译为css

步骤：

        新建src/less/index.less – 设置li字体大小

        把index.less引入到入口处

        下载加载器来处理less文件

        webpack.config.js针对less配置

        打包观察效果

webpack如何支持less打包? 需要注意什么?

        依赖less-loader和less模块包

        转换css后还需要css-loader和style-loader的处理

3.7 webpack处理图片文件

问题: 网页里不能没有图片吧, 那webpack能打包不?

在src/assets/准备图片文件

在index.less对body设置背景图片

在入口导入图片文件, 设置到img标签插入到body

打包观察效果

报错: 因为webpack无法自己处理图片文件

webpack5, 使用asset module技术实现字体文件和图片文件处理, 无需配置额外loader

文档: https://webpack.docschina.org/guides/asset-modules/

以前用url-loader和file-loader来处理

现在webpack.config.js – 针对图片文件设置type: “assets“

再次打包观察效果

小于8KB文件, 文件转base64打包在js中, 大于8KB, 文件自动命名输出到dist下, 打包观察效果和2图区别

webpack如何支持图片打包? 对图片有哪2种处理方案?

        webpack5, 在rules里, 针对图片文件设置type: asset

        小于8KB转base64字符串进js里, 大于8KB输出文件

3.8 webpack加载文件优缺点

图片翻译成了base64, 放到了js文件中

        好处: 浏览器不用发请求了，直接可以读取, 速度快

        坏处: 图片太大，再转`base64`就会让图片的体积增大 30% 左右, 得不偿失

3.9 webpack处理字体图标

步骤：
        1. src/assets 下 放入fonts字体相关文件夹(预习资料里)
        2. src/main.js 引入 assets/fonts/iconfont.css

        3. src/main.js 创建一个i标签, 使用字体图标标签添加到body上

        4. 添加针对字体文件的加载器规则, 使用asset/resource(直接输出文件并配置路径)

        5. 打包后运行网页观察效果

3.10 webpack对JS语法降级

babel官网: https://www.babeljs.cn/

babel-loader文档: https://webpack.docschina.org/loaders/babel-loader/

babel: 一个javascript编译器, 把高版本js语法降级处理输出兼容的低版本语法

babel-loader: 可以让webpack转译打包的js代码

1. 在src/main.js – 定义箭头函数, 并打印箭头函数变量 ( 千万不能调用, 为了让webpack打包函数, 看降级效果 )

2. 下载加载器

3. 配置到webpack.config.js上

4. 打包观察是否降级

webpack如何帮助我们降低js版本语法的呢?

        借助 babel-loader 和 babel 编译器, 给 webpack 配置上

四、webpack开发服务器

4.1 webpack开发服务器

问题: 每次修改代码, 重新 yarn build 打包, 才能看到最新的效果, 实际工作中, 打包 yarn build 非常费时 (30s - 60s)

原因:

        从0构建依赖

        磁盘读取对应的文件到内存, webpack开始加载

        再用对应的 loader 进行处理

        将处理完的内容, 输出到磁盘指定目录

解决:起一个开发服务器, 缓存一些已经打包过的内容, 只重新打包修改的文件, 最终运行在内存中给浏览器使用

总结: webpack开发服务器, 把代码运行在内存中, 自动更新, 实时返回给浏览器显示

为什么要使用webpack开发服务器呢?

        打包在内存中, 速度快

        自动更新打包变化的代码, 实时返回给浏览器显示

4.2 webpack-dev-server模块使用

webpack-dev-server文档: https://webpack.docschina.org/configuration/dev-server/

1. 下载模块包

2. 自定义webpack开发服务器启动命令serve – 在package.json里

3. 启动当前工程里的webpack开发服务器

4. 重新编写代码, 观察控制台和浏览器是否自动打包和更新

如何使用webpack开发服务器实时打包我们代码呢?

        确保下载了webpack-dev-server到工程中

        在package.json-配置自定义命令, 然后启动即可

        webpack-dev-server会给我们一个地址+端口浏览器

        访问即可看到在内存中打包的index.html页面

4.3 webpack-dev-server配置

webpack-dev-server配置文档: https://webpack.docschina.org/configuration/dev- server/#devserverafter

1. 在webpack.config.js中添加如下配置即可

2. 重新启动webpack开发服务器观察效果

如何修改webpack开发服务器的配置呢?

        去文档查找配置项的名字

        在webpack.config.js – devServer选项里添加