webpack 的基本使用

webpack

概念

前端项目工程化的一个具体解决方案。

主要功能：

前端模块化开发支持
代码压缩混淆
处理浏览器JS兼容性问题
性能优化
……

好处：

程序员能把工作重心放到具体的功能实现上

目前Vue，React等前端项目，基本上都是基于webpack进行工程化开发的。

基本使用

隔行初始化变色的案例

npm install jquery -S	or	npm i jquery -S
npm install jquery --save	# 与上面语义一致

使用-S会将包（此处为jquery）的相关信息写入package.json中的dependencies

在项目中安装 webpack

npm i webpack@5.42.1 webpack-cli@4.9.0 -D
npm i webpack@5.42.1 webpack-cli@4.9.0 --save-dev		# 与上面语义一致

使用-D会将包（此处为webpack、webpack-cli）的相关信息写入package.json中的devDependencies
devDependencies 里面的插件只用于开发环境，不用于生产环境；dependencies 是需要发布到生产环境的。
比如我们写一个项目要依赖于 jQuery，没有这个包的依赖运行就会报错，这时候就把这个依赖写入dependencies ；而我们使用的一些构建工具比如 webpack 这些只是在开发中使用的包，上线以后就和他们没关系了，所以将它写入devDependencies。

在项目中配置 webpack

script 节点下的脚本是可以运行的。

"dev"是脚本的名字，可以自定义，"webpack"是固定写法。

webpack.config.js 中mode的作用

'development'：适合在开发阶段使用，打包速度快，不会对代码进行压缩。
'production'：适合在项目发布阶段使用，打包速度慢，对代码进行了压缩。

webpack.config.js 的作用

webpack.config.js 会在运行 npm run dev 命令时被读取，webpack根据其中给定的配置，对项目进行打包。

webpack 中的默认约定

在 webpack 4.x 和 5.x 的版本中，有如下的默认约定：

默认的打包入口文件为：src/index.js
默认的输出文件路径为：dist/main.js

可以在webpack.config.js中修改这一默认约定。

自定义打包入口与输出路径

在webpack.config.js中，通过entry节点指定打包的入口，通过output节点指定打包的出口。

webpack 中的插件

插件的作用

安装插件可以扩展 webpack 的能力，让它用起来更方便。常用的插件有：

webpack-dev-server
- 类似 node.js 的 nodemon
- 修改源代码后，webpack 会自动进行项目的打包和构建
html-webpack-plugin
- webpack 中的 html 插件
- 可以通过此插件自定义 index.html 页面的内容

webpack-dev-server

安装

在项目路径下运行如下命令：

npm install webpack-dev-server@3.11.2 -D

配置

注意：webpack-dev-server 会启动一个实时打包的 http 服务器
引用js文件时需要注意：如果使用 webpack-dev-server 插件来自动打包，生成的js文件会放在内存中，~~路径为项目根目录~~（路径可能为output.filename）。（物理磁盘中无法看到）

html-webpack-plugin

安装

在项目路径下运行如下命令：

npm install html-webpack-plugin@5.3.2 -D

配置

这样配置完后，直接打开 http://localhost:8080/ 就可以看到 index.html 的内容了
复制出来的 index.html 会存储在内存中，磁盘里看不见。

一些疑惑

https://juejin.cn/post/6844903853708541959

通过 html-webpack-plugin 插件复制到项目根目录中的 index.html 页面，也被放到了内存中
html-webpack-plugin 插件在生成的html文件中，自动注入了一个script标签，该标签的src属性为output.filename

webpack.config.js 中的一些属性

注意：修改了 webpack.config.js ，必须重启实时打包服务器，否则配置无法生效。

devServer

通过devServer属性，可以对webpack-dev-server插件进行更多配置。

webpack 中的 loader

在实际开发过程中，webpack默认只能打包处理以.js结尾的文件，其他非.js结尾的文件需要调用loader才可以正常打包，否则会报错。

loader 的作用：协助webpack打包处理特定的文件模块。比如:

css-loader 可以打包处理.css相关的文件
less-loader 可以打包处理.less相关的文件
babel-loader 可以打包处理 webpack 无法处理的高级 JS 语法

loader 的调用过程

处理css文件

如果在入口js文件中引入了css文件，而没有使用css-loader：
安装和配置 css-loader
1. 运行如下命令，安装 css-loader
```
npm i style-loader@3.0.0 css-loader@5.2.6 -D
```
2. 在webpack.config.js的 module -> rules 数组中，添加调用 loader 的规则：
  
  其中，test表示匹配的文件类型（正则匹配），use表示这种文件类型要调用的 loader。
当 webpack 发现某个文件处理不了的时候，会查找配置文件 webpack.config.js ，看 module.rules 数组中是否配置了相应的 loader。如果有，webpack 把这个文件转交给 module.rules 中的最后一个 loader处理。
注意：use 数组中指定的 loader 的顺序是固定的，调用顺序：从后往前调用。
所有的 loader 处理完后，将处理结果转交给 webpack，webpack 最终生成了打包好的文件。

处理less文件

运行如下命令，安装 less-loader
```
npm i less-loader@10.0.1 less@4.1.1 -D
```
在webpack.config.js的 module -> rules 数组中，添加调用 loader 的规则：

处理url路径相关的文件

如果在js文件中导入了url路径相关的文件（如图片），而没有调用对应的loader：
安装和配置 url-loader
1. 运行如下命令
```
npm i url-loader@4.1.1 file-loader@6.2.0 -D
```
2. 在webpack.config.js的 module -> rules 数组中，添加调用 loader 的规则：
  
  用正则表达式匹配了后缀为.jpg、.png、.gif的文件。
url-loader 的 limit 选项

limit用来控制是否对图片进行base64编码，以减少http请求。

低于limit大小的图片将会进行base64编码。

单位是字节（Byte）

打包处理js文件中的高级语法

webpack 只能打包处理一部分的高级 JS 语法。对于那些 webpack 无法处理的高级 JS 语法，需要借助babel-loader进行打包处理。
安装和配置 babel-loader
1. 运行如下命令：
```
npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D
```
2. 在webpack.config.js的 module -> rules 数组中，添加调用 loader 的规则：
  
  一定要写 exclude，避免处理 node_modules 目录中的 .js 文件
3. 配置 babel-loader
  
  在项目根目录下，创建配置文件babel.config.js，内容详情参考 Babel 官网