webpack(模块打包工具)

webpack(模块打包工具)

一、目标

• 能说出webpack的作用
• 能够掌握webpack基本配置
• 能够知道webpack开发服务器运作过程
• 能够熟练webpack中文文档

二、webpack基本概念

为什么要学习webpack

1. 减少文件数量
2. 缩减代码体积
3. 提高浏览器打开的速度

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

• 支持所有类型文件的打包
• 支持less/sass => css
• 支持ES6/7/8 => ES5
• 压缩代码，提高加载速度

三、webpack使用步骤

1. 初始化包环境

yarn init

2. 安装依赖包

yarn add webpack webpack-cli -D

3. 配置scripts(自定义命令)

"scripts": {
    "bulid" : "webpack"
}

4. webpack基础使用

需求：2个js文件 => 打包成1个js文件

分析：

1. 新建src下的资源
2. add.js定义求和函数并导出
3. index.js引入add模块并使用函数输出结果
4. 执行 yarn build自定义命令，进行打包（确保终端路径在src的父级文件夹）

5. webpack再次打包

需求：代码更多后，如何打包呢？

分析：

1. src下新建tool/tool.js
2. 定义数组求和函数导出
3. index.js 引入tool模块的函数并使用,打印结果
4. 执行yarn build自定义命令，进行打包（确保终端路径在src的父级文件夹）

四、webpack配置

1. webpack-入口和出口

配置文档：https://webpack.docschina.org/concepts/#entry

1. 新建webpack.fonfig.js
2. 填入配置
3. 修改入口文件名
4. 打包观察效果

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js', // 入口
  output: {  // 出口
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js', // 出口文件的名字（代码打包进这里）
  },
};

2. 打包流程

3. webpack打包代码，jQuery实现功能

需求：新建项目，yarn下载jQuery,然后模块化引入到js中，编写jq代码实现隔行变色效果如下：

步骤：

1. 从0准备环境，初始化包环境，下载webpack和webpack-cli包,配置自定义命令build
2. yarn下载jQuery,新建public/index.html,准备一些li标签
3. src/main.js引入jQuery,编写功能代码
4. 执行打包命令
5. 复制public/index.html到dist/,然后引入打包后的js,运行网页观察效果

4. html-webpack-plugin插件

5. webpack打包css文件

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

1. 新建-src/css/index.css
2. 编写去除li圆点样式代码
3. （重要）一定要引入到入口才会被webpack打包
4. 执行打包命令观察效果

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

6. 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中

1. 下载加载器
2. webpack.config.js配置
3. 打包观察效果

7. webpack处理less文件

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

less-loader 作用：识别less文件

less 作用: 将less编译为css

1. 新建src/less/index.less - 设置li字体大小
2. 把index.less引入到入口
3. 下载加载器来处理less文件
4. webpack.config.js针对less配置
5. 打包观察效果

8. webpack处理图片文件

1. 在src/assets/准备图片文件
2. 在index.less对象body设置背景图片
3. 在入口导入图片文件，设置到img标签插入到body
4. 打包观察效果

webpack5, 使用asset module技术实现字体文件和图片文件处理, 无需配置额外loader 文档: https://webpack.docschina.org/guides/asset-modules/

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

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

9. webpack加载文件优缺点

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

• 好处：浏览器不用发请求了，直接可以读取，速度快
• 坏处：图片太大，再转base64就会让图片的体积增大30%左右，得不偿失

10. webpack处理字体图标

1. src/assets下放入fonts字体相关文件夹
2. src/main.js引入assets/fonts/iconfont.css
3. src/main.js创建一个i标签，使用字体图标标签添加到body上
4. 添加针对字体文件的加载器规则，使用asset/resource(直接输出文件配置路径)
5. 打包后运行网页观察效果

11. 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开发服务器

1. 开发服务器概述

问题：每次修改代码，重新yarn build打包，才能看到最新的效果，实际工作中，打包yarn build 非常耗时（30s - 60s）

原因：

• 从0构建依赖
• 磁盘读取对应的文件到内存，webpack开始加载
• 再用对应的loader进行处理
• 将处理的内容，输出到磁盘指定目录

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

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

2. 开发服务器的基本使用

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

（1）下载模块包

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

"scripts" : {
    "build": "webpack",
    "serve": "webpack serve"
}

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

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

3. 开发服务器配置

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

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

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

3. 开发服务器配置

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

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

module.exports = {
	// ...其他配置
	devServer: {
	port: 300 // 端口号
	}
}

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