Webpack的基础配置
前端工程化
- ① 模块化（js 的模块化、css 的模块化、资源的模块化）
- ② 组件化（复用现有的 UI 结构、样式、行为）
- ③ 规范化（目录结构的划分、编码规范化、接口规范化、文档规范化、 Git 分支管理）
- ④ 自动化（自动化构建、自动部署、自动化测试）
什么是前端工程化
- 概念
- 以模块化、组件化、规范化、自动化为基础，进项前端项目开发的方式，叫做前端工程化
- 为什么进行工程化
- 工程化提供了一套标准的开发方案和流程，让前端开发自成体系
注意： 企业中的 Vue 和 React 项目，都是基于工程化的方式进行开发的 前端工程化
前端工程化的解决方案
- 早期的前端工程化解决方案：
- grunt（ www.gruntjs.net/ ）
- gulp（ www.gulpjs.com.cn/ ）
- 目前主流的前端工程化解决方案：
- webpack（ www.webpackjs.com/ ）
- parcel（ zh.parceljs.org/ ）
webpack 的基本概念
什么是 webpack
webpack 是前端项目工程化的具体解决方案。
为什么要掌握 webpack
webpack 让前端开发变得更高效
① 代码压缩混淆
② 处理浏览器端 JavaScript 的兼容性
③ 以模块化的方式处理项目中的资源
注意：目前绝大部分的 Vue/React 等前端项目，都是基于 webpack 进行工程化开发的。
安装所需的包
# 切换镜像源
nrm use taobao
# 初始化
npm init -y
# 安装项目依赖包
npm install jquery
webpack 的基本使用
创建列表隔行变色demo
目的：以模块化的方式实现列表隔行变色的项目，为 webpack 的学习做准备。
具体步骤：
① 在项目目录中，新建 src 源代码目录
② 在项目目录中，新建public 静态资源目录
③ src目录中创建index.js
④ public目录中创建index.html，引入index.js
⑤ 初始化首页基本的结构（创建ul>li这样的结构）
⑥ 通过 ES6 模块化的方式导入 jQuery，实现列表隔行变色效果
import $ from 'jquery';
$(function () {
$('li:odd').css('background-color', '#ccffcc');
$('li:even').css('background-color', '#ffccff');
})
分析项目中遇到的问题
- 报错的原因：
- 浏览器对 ES6+ 高级语法支持的不好，有兼容性问题
- 如何解决：
- 在开发的时候，让程序员尽可能 “写得爽”
- 在运行的时候，让浏览器不出现“兼容性问题”
- 具体方案：
- 在项目中安装和配置 webpack，对 JS 代码进行降级处理
安装和配置webpack
目标：
- 通过 webpack 处理 JS 代码的兼容性问题
安装 webpack 相关的两个包： webpack@5.58.2 和 webpack-cli@4.9.0
① 在项目根目录中，创建名为 webpack.config.js 的 webpack 配置文件，并初始化如下的基本配置：
module.exports = {
// 打包模式
mode: 'development', // production：生成 development：开发
}
② 在 package.json 的 scripts 节点下，新增 dev 脚本如下：
"scripts": {
"dev": "webpack"
},
③ 在终端中运行 npm run dev 命令，启动 webpack 进行项目的打包构建
打包结果
执行 npm run dev 命令后，会在项目根目录生成 dist文件夹，并在 dist 文件夹中生成 main.js
main.js 就是 jquery.js 和 index.js 的结合体。
index.html 中引入 main.js ，再看效果。
mode 的可选值
目标：清楚每个 mode 值的作用，知道每个值的具体应用场景。
mode 节点的可选值有两个，分别是：
① development
- 开发环境
- 不会对打包生成的文件进行代码压缩和性能优化
- 打包速度快，适合在开发阶段使用
② production
- 生产环境
- 会对打包生成的文件进行代码压缩和性能优化
- 打包速度很慢，仅适合在项目发布阶段使用
webpack.config.js的作用
webpack.config.js是什么
- webpack.config.js 是 webpack 的配置文件。
作用
- 告诉 webpack 怎么对项目进行打包。
被读取的时机
- npm run dev 的时候（打包的时候），会先读取配置文件，再对项目进行打包处理。
webpack 中的默认约定
在 webpack 4.x 和 5.x 的版本中，有如下的默认约定：
① 默认的打包入口文件为 src -> index.js
② 默认的输出文件路径为 dist -> main.js
注意：可以在 webpack.config.js 中修改打包的默认约定
自定义打包的入口与出口
在 webpack.config.js 配置文件中，通过 entry 节点指定打包的入口。通过 output 节点指定打包的出口。
示例代码如下：
const path = require('path');
module.exports = {
// 打包模式
mode: 'development', // production：生成 development：开发
// 入口文件
entry: path.join(__dirname, 'src', 'index.js'),
// 出口文件
output: {
path: path.join(__dirname, 'dist'), // 要使用绝对路径，否则报错
filename: 'bundle.js',
}
}
重新运行 npm run dev ，即可得到新的打包结果 bundle.js .
index.html 中引入新的打包结果 bundle.js。
webpack 中的插件
概述
webpack 插件的作用
通过安装和配置第三方的插件，可以拓展 webpack 的能力，从而让 webpack 用起来更方便。
最常用的 webpack 插件有如下3个：
① clean-webpack-plugin
- 每次打包时，自动清理 dist 目录
② webpack-dev-server
- 类似于 node.js 阶段用到的 nodemon 工具
- 每当修改了源代码，webpack 会自动进行项目的打包和构建
③ html-webpack-plugin
- webpack 中的 HTML 插件
- 可以通过此插件自定制 index.html 页面的内容
clean-webpack-plugin
作用：每次打包构建的时候，自动清理 dist 目录下的旧文件，保证 dist 目录的代码是最新的。
安装依赖包：clean-webpack-plugin@4.0.0
在 webpack.config.js 中增加配置：
// 1. 配置自动清理插件（在打包的时候，插件就会自动清理 dist 中没用的文件）
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const cleanPlugin = new CleanWebpackPlugin();
module.exports = {
mode: 'development',
// 其他项省略......
// 插件配置
plugins: [ cleanPlugin ]
}
重新运行 npm run dev ，即可将 dist 文件夹中没用的文件清理掉.
webpack-dev-server
基本使用
作用：可以让 webpack 监听项目源代码的变化，从而进行自动打包构建。
安装包 webpack-dev-server@4.3.1
配置 webpack-dev-server
① 修改 package.json -> scripts 中的 dev 命令如下：
"scripts": {
"dev": "webpack serve" // 注意这里是 serve ，不是 server
},
② 在 webpack.config.js 配置文件中，增加 devServer 节点对 webpack-dev-server 插件进行更多的配置
devServer: {
port: 9000, // 实时打包所用的端口号
open: true // 初次打包完成后，自动打开浏览器
}
③ 再次运行 npm run dev 命令，重新进行项目的打包
④ 在浏览器中访问 http://localhost:8080 地址，查看自动打包效果
注意：凡是修改了 webpack.config.js 配置文件，或修改了 package.json 配置文件，必须重启实时打包的服务器，否则最新的配置文件无法生效！
打包生成的文件哪儿去了？
① 不配置 webpack-dev-server 的情况下，webpack 打包生成的文件，会存放到实际的物理磁盘上
-
严格遵守开发者在 webpack.config.js 中指定配置
-
根据 output 节点指定路径进行存放
② 配置了 webpack-dev-server 之后，打包生成的文件存放到了内存中
-
不再根据 output 节点指定的路径，存放到实际的物理磁盘上
-
提高了实时打包输出的性能，因为内存比物理磁盘速度快很多
生成到内存中的文件该如何访问？
- webpack-dev-server 生成到内存中的文件，默认放到了项目的根目录中，而且是虚拟的、不可见的。
- 可以直接用 / 表示项目根目录，后面跟上要访问的文件名称，即可访问内存中的文件
- 例如 /bundle.js 就表示要访问 webpack-dev-server 生成到内存中的 bundle.js 文件
所以，index.html 中应该这样引入js <script src="/bundle.js"></script>
html-webpack-plugin
html-webpack-plugin 是 webpack 中的 HTML 插件。
作用：自动把生成好的 bundle.js 注入到 HTML 页面中。
安装包 html-webpack-plugin@5.3.2
在webpack.config.js中配置 html-webpack-plugin
const HtmlPlugin = require('html-webpack-plugin');
const htmlPlugin = new HtmlPlugin({
template: path.join(__dirname, 'public', 'index.html'), // public中，你的html叫什么
filename: 'index.html' // 打包后的html叫什么（这个文件会生成到dist文件夹）
});
module.exports = {
mode: 'development',
// 其他项省略......
// 插件配置
plugins: [ cleanPlugin, htmlPlugin ]
}
其他说明：
① 通过 HTML 插件复制到项目根目录中的 index.html 页面，也被放到了内存中，所以看不到
② HTML 插件在生成的 index.html 页面，自动注入了打包的 bundle.js 文件
webpack 中的 loader
loader 概述
loader加载器有什么用？
- 在实际开发过程中，webpack 默认只能打包处理以 .js 后缀名结尾的模块。
- 其他非 .js 后缀名结尾的模块， webpack 默认处理不了
- 需要调用 loader 加载器才可以正常打包非 js 文件，否则会报错！
所以，loader 加载器的作用是协助 webpack 打包处理特定的文件模块。比如：
- css-loader 可以打包处理 .css 相关的文件
- less-loader 可以打包处理 .less 相关的文件
- babel-loader 可以打包处理 webpack 无法处理的高级 JS 语法
loader 的调用过程
打包处理 css 文件
① 安装包 style-loader@3.3.0 和 css-loader@6.4.0
② 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：
module.exports = {
mode: 'development',
// 其他项省略......
module: {
rules: [
// 处理css文件
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
]
}
}
其中，test 表示匹配的文件类型， use 表示对应要调用的 loader
注意：
- use 数组中指定的 loader 顺序是固定的
- 多个 loader 的调用顺序是：从后往前调用
打包处理 less 文件
① 安装 less-loader@10.1.0 和 less@4.1.2
② 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：
module.exports = {
mode: 'development',
// 其他项省略......
module: {
rules: [
// 处理css文件
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
// 处理less文件
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
]
}
}
打包处理与 url 路径相关的文件
① 安装 url-loader@4.1.1和 file-loader@6.2.0
- 这两个模块都是webpack 4 中，用于处理资源（图片、字体文件等等）的
- 最新版的 webpack 5 中，也可以使用上述两个loader。
- 最新版的 webpack 5 中，使用 asset 来处理资源。
② 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：
module.exports = {
mode: 'development',
// 其他项省略......
module: {
rules: [
// 处理css文件
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
// 处理less文件
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
// 处理图片文件
{ test: /\.(jpg|png|gif)$/, use: 'url-loader?limit=6055&outputPath=images' },
]
}
}
其中 ? 之后的是 loader 的参数项：
- limit 用来指定图片的大小，单位是字节（byte）
- 只有 ≤ limit 大小的图片，才会被转为 base64 格式的图片；> limit的图片直接使用图片文件。
上述配置url-loader，使用查询参数可以。也可以使用对象的格式进行配置：
module.exports = {
mode: 'development',
// 其他项省略......
module: {
rules: [
// 处理css文件
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
// 处理less文件
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
// 处理图片文件
{
test: /\.(jpg|png|gif)$/,
loader: 'url-loader', // 使用对象语法，这里不能叫use，必须叫loader
options: {
limit: 10000, // 图片大于 limit 值，会使用原图片，小于等于limit值，会使用base64
outputPath: 'images', // 打包后，图片放到 images 文件夹
name: '[hash:8]_[name].[ext]', // [hash:5] 表示5位随机字符 [name] 表示原图片的名字 [ext] 表示原图的后缀
esModule: false, // 加入这项可以让css引入的背景图显示
},
type: 'javascript/auto', // 加入这项可以让css引入的背景图显示
},
]
}
}
html-loader
-
安装 npm install html-loader
-
配置
module.exports = { mode: 'development', // 其他项省略...... module: { rules: [ // 处理css文件 { test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 处理less文件 { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, // 处理图片文件 { test: /\.(jpg|png|gif)$/, loader: 'url-loader', // 使用对象语法，这里不能叫use，必须叫loader options: { limit: 10000, // 图片大于 limit 值，会使用原图片，小于等于limit值，会使用base64 outputPath: 'images', // 打包后，图片放到 images 文件夹 name: '[hash:8]_[name].[ext]', // [hash:5] 表示5位随机字符 [name] 表示原图片的名字 [ext] 表示原图的后缀 esModule: false, // 加入这项可以让css引入的背景图显示 }, type: 'javascript/auto', // 加入这项可以让css引入的背景图显示 }, // 处理html中img标签引入的图片 { test: /\.html$/, use: 'html-loader' } ] } }
到此为止：
- 可以在 js 中，import 导入图片
- 可以在 css 中，添加背景图片
- 可以在 html 中，通过 img 的 src 引入图片
webpack5中的asset处理资源
使用 asset 来代替 url-loader 、file-loader、raw-loader。
module.export = {
output: {
path: join(__dirname, 'dist'),
filename: 'bundle123.js',
assetModuleFilename: 'images/[hash:8][ext]', // 配置文件的输出路径
},
module: {
rules: [
// 处理css文件
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
// 处理less文件
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
// 处理图片资源
{
test: /\.(jpg|png|gif)$/,
type: 'asset',
parser: {
dataUrlCondition: {
maxSize: 12000, // 图片超过这个大小，使用原图片，否则使用base64字符串
}
}
},
// 处理html中的img标签引入的图片
{ test: /\.html$/, use: 'html-loader' }
]
}
}
base64
- base64格式，就是一个字符串。
- 和原图对比：
- base64格式的字符串 比 原图片 大 30%左右。
- 使用base64格式的字符串，可以减少网络请求，减轻服务器的压力。
结论：实际开发中，小图可以使用base64格式；大图还是使用原图片。
打包处理 js 文件中的高级语法
webpack 只能打包处理一部分高级的 JavaScript 语法。对于那些 webpack 无法处理的高级 js 语法，需要借 助于 babel-loader 进行打包处理。
例如 webpack 无法处理下面的 JavaScript 代码：
// js装饰器
function info(target) {
target.abc = '哈哈哈哈哈哈哈，这是新语法';
}
// 下面的语法，表示给Person加了一个abc属性
@info
class Person { }
console.log(Person.abc);
安装 babel-loader 相关的包 babel-loader@8.2.2 和 @babel/core@7.15.8 和 @babel/plugin-proposal-decorators@7.15.8
在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：
module.exports = {
mode: 'development',
// 其他项省略......
module: {
rules: [
// 处理css文件
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
// 处理less文件
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
// 处理图片文件
{ test: /\.(jpg|png|gif)$/, use: 'url-loader?limit=6055&outputPath=images' },
// .js 文件使用 babel-loader去处理。但是不要处理 node_moduels文件夹中的第三方模块
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
]
}
}
配置 babel-loader
在项目根目录下，创建名为 babel.config.js 的配置文件，定义 Babel 的配置项如下：
module.exports = {
// 声明 babel 可用的插件
plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]]
}
打包发布
为什么要打包发布
项目开发完成之后，需要使用 webpack 对项目进行打包发布，主要原因有以下两点：
① 开发环境下，打包生成的文件存放于内存中，无法获取到最终打包生成的文件
② 开发环境下，打包生成的文件不会进行代码压缩和性能优化
为了让项目能够在生产环境中高性能的运行，因此需要对项目进行打包发布。
配置 webpack 的打包发布
在 package.json 文件的 scripts 节点下，新增 build 命令如下：
"scripts": {
"dev": "webpack serve",
"build": "webpack --mode production"
},
- --mode 是一个参数项，用来指定 webpack 的运行模式。
- production 代表生产环境，会对打包生成的文件 进行代码压缩和性能优化。
注意：通过 --mode 指定的参数项，会覆盖 webpack.config.js 中的 mode 选项。
把 JavaScript 文件统一生成到 js 目录中
-
在 webpack.config.js 配置文件的 output 节点中，进行如下的配置：
output: { path: path.join(__dirname, 'dist'), filename: 'js/bundle.js', // 这里加入 js 文件夹。 },
把图片文件统一生成到 image 目录中
-
修改 webpack.config.js 中的 url-loader 配置项，新增 outputPath 选项即可指定图片文件的输出路径：
module: { rules: [ { test: /\.(jpg|png|gif)$/, use: 'url-loader?limit=6055&outputPath=images' }, ] }
Source Map
目前的问题
- 开发环境中，错误行号对应不上。比如本来是在第23行报错了，但是浏览器提示在第20行报错。
- 打包后，又不希望我们的代码被其他人看到源码。
上述问题，可以通过sourceMap解决。
什么是 Source Map
Source Map 就是一个信息文件，里面储存着位置信息。
也就是说，Source Map 文件中存储着压缩混淆后的代码，所对应的转换前的位置。
有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码，能够极大的方便后期的调试。
配置
开发环境
推荐在 webpack.config.js 中添加如下的配置，即可保证运行时报错的行数与源代码的行数 保持一致：
module.exports = {
// source-map 仅限在开发模式中使用
//（开发中，程序员需要排错，需要准确的定位错误行号）
devtool: 'source-map',
}
生产环境
module.exports = {
// nosources-source-map 适合生产环境。
//（生产环境，我们不希望别人看到我们的源码，这个配置项只显示行号，但不会显示源码）
devtool: 'nosources-source-map',
}
总结
实际开发中会用Vue脚手架生成带有webpack的项目，开箱即用，不过基本概念还是要懂得！