1. Webpack 简介与体验
javascript
复制代码
/*
使用 Webpack
需求：封装 utils 包，校验用户名和密码长度，在 index.js 中使用，使用 Webpack 打包
步骤：
1. 新建项目文件夹，初始化包环境，得到 package.json 文件
npm init -y
2. 新建 src 源代码文件夹（书写代码）
3. 下载 webpack webpack-cli 到项目（版本独立）
npm i webpack webpack-cli --save-dev
4. 项目中运行工具命令，采用自定义命令的方式（局部命令）
npm run build
5. 自动产生 dist 分发文件夹（压缩和优化后，用于最终运行的代码）
1. Webpack 有什么用？
➢ 压缩，转译，整合，打包我们的静态模块
2. Webpack 怎么用？
➢ 初始化环境，编写代码
➢ 安装，配置自定义命令
➢ 打包体验
3. 如何运行 package.json 里的自定义命令？
➢ npm run 自定义命令
4. Webpack 默认入口和出口？
➢ src/index.js 和 dist/main.js
*/
2. 自动生成 html 文件
插件 html-webpack-plugin
javascript
复制代码
// 1. 插件 html-webpack-plugin 作用：在 Webpack 打包时生成 html 文件，并引入其他打包后的资源
// 2. 步骤：
// 2.1 下载 html-webpack-plugin 本地软件包到项目中
// npm i html-webpack-plugin --save-dev
// 2.2 配置 webpack.config.js 让 Webpack 拥有插件功能
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
// 插件列表
plugins: [
new HtmlWebpackPlugin({
// 以指定的 html 文件作为生成模板
template: path.resolve(__dirname, "public/index.html"),
}),
],
};
// 2.3 指定以 public/index.html 为模板复制到 dist/index.html，并自动引入其他打包后资源
// 3. 运行打包命令，观察打包后 dist 文件夹下内容并运行查看效果
3. 打包 css 代码
javascript
复制代码
/*
Webpack 默认只识别 JS 和 JSON 文件内容，
所以想要让 Webpack 识别更多不同内容，需要使用加载器
css-loader style-loader 这2个加载器来辅助 Webpack 才能打包 css 代码
加载器的作用：让 Webpack 识别更多的代码内容类型
*/
// 1. 准备 css 文件引入到 src/mian.js 中（压缩转译处理等）
import "./css/index.css";
// 2. 下载 css-loader 和 style-loader 本地软件包
// npm i css-loader style-loader --save-dev
// 3. 配置 webpack.config.js 让 Webpack 拥有该加载器功能
module.exports = {
// 加载器
module: {
// 规则列表
rules: [
{
// 匹配 .css 结尾的文件
test: /\.css$/i,
// 使用从后到前的加载器来解析 css 代码和插入到 DOM
use: ["style-loader", "css-loader"],
},
],
},
};
// 4. 打包后运行 dist/index.html 观察效果，看看准备好的样式是否作用在网页上
4. 打包 less 代码
javascript
复制代码
// ! 打包 less
// 1. 准备 less 样式引入到 src/main.js 中
import "@/less/index.less";
// 2. 下载 less 和 less-loader 本地软件包
// npm i less less-loader --save-dev
// 3. 配置 webpack.config.js 让 Webpack 拥有功能
module.exports = {
// 加载器
module: {
// 规则列表
rules: [
{
test: /\.less$/i,
use: [
// compiles Less to CSS
"style-loader",
"css-loader",
"less-loader",
],
},
],
},
};
// 4. 打包后运行 dist/index.html 观察效果
5. 打包图片
javascript
复制代码
// ! 打包图片
// 资源模块: 图片，字体文件等
/*
- 小于 8KB 文件会被转成 data URI（base64 字符串）打包进 JS 文件中（好处：可以减少网络请求次数，缺点：增加 30% 体积）
- 大于 8KB 文件会被复制到 dist 下，自动替换使用代码的图片名字
*/
// 1. 准备图片素材到 src/assets 中（存放资源模块 - 图片/字体图标等）
// 2. 在 index.less 中给 body 添加背景图
/* body{
background: url(../assets/background.png);
} */
// 3. 在 main.js 中给 img 标签添加 logo 图片
/**
* 目标：要给 img 标签设置一个 logo 图片
* 注意：在赋予给 img 的 src 属性图片的时候，需要把图片数据对象引入过来
*/
import imgObj from "@/assets/logo.png";
document.querySelector(".logo-img").src = imgObj;
// 4. 配置 webpack.config.js 让 Webpack 拥有打包图片功能
module.exports = {
// 加载器
module: {
// 规则列表
rules: [
{
// 针对资源模块（图片，字体文件，图标文件等）处理
test: /\.(png|jpg|jpeg|gif)$/i,
// 根据文件大小（8KB）小于：把文件转成 base64 打包进 js 文件中（减少网络请求次数）大于：文件复制到输出的目录下
type: "asset",
// 输出文件时，路径+名字
generator: {
filename: "assets/[hash][ext]",
},
},
],
},
};
// 5. 打包后运行 dist/index.html 观察效果
6. 集成 babel 编译器
javascript
复制代码
// ! Webpack 集成 babel 编译器
// babel 编译器的作用: 把 ECMAScript2015+ 语法向后转换，兼容低版本浏览器
// 1. 编写一段映射数组元素，每个数值 + 1 的代码（要求用箭头函数）
// 目标：让 Webpack + Babel 编译降级 JS 语法
const arr = [1, 2, 3];
const result = arr.map((val) => val + 1);
console.log(result);
// 2. 下载 babel babel-loader core 本地软件包
// npm i babel-loader @babel/core @babel/preset-env -D
// 3. 配置 webpack.config.js 让 Webpack 拥有功能
module.exports = {
module: {
rules: [
{
test: /\.m?js$/,
// 排除指定目录里的 js （不进行编译降级）
exclude: /(node_modules|bower_components)/,
use: {
loader: "babel-loader",
options: {
// 预设规则
presets: ["@babel/preset-env"],
},
},
},
],
},
};
// 4. 打包运行 dist/index.html 观察效果
7. Webpack 开发服务器
javascript
复制代码
// ! Webpack 开发服务器 webpack-dev-server
// 启动 Web 服务，打包输出源码在内存，并会自动检测代码变化热更新到网页
// 1. 下载 webpack-dev-server 软件包到当前项目
// npm i webpack-dev-server --save-dev
// 2. 配置自定义命令，并设置打包的模式为开发模式
/* "scripts": {
"dev": "webpack server --mode=development"
}, */
// 3. 使用 npm run dev 来启动开发服务器，访问提示的域名+端口号，
// 在浏览器访问打包后的项目网页，修改代码后试试热更新效果
// 在 js / css 文件中修改代码保存后，会实时反馈到浏览器
8. Webpack 打包模式
javascript
复制代码
// ! Webpack 打包模式
// 开发模式 development 调试代码，实时加载，模块热替换等
// 生产模式 production 压缩代码，资源优化，更轻量等
/*
开发模式注重代码热替换更快，让开发调试代码更便捷，
生产模式注重项目体积更小，更轻量，适配不同的浏览器环境
*/
9. 调试代码 source map
javascript
复制代码
// ! Webpack 开发环境调错 source map
// source map: 准确追踪 error 和 warning 在原始代码的位置
// webpack.config.js 配置 devtool 选项
module.exports = {
// inline-source-map -- 把源码的位置信息一起打包在 JS 文件内
devtool: "inline-source-map",
};
// source map 适用于开发环境，不要在生产环境使用（防止被轻易查看源码位置）
10. 解析别名路径
javascript
复制代码
// ! Webpack 设置解析别名路径
// 创建 import 或 require 的别名，来确保模块引入变得更简单
// 1. 原来路径如下：
import { checkUsername, checkPassword } from "../src/utils/check.js";
// 2. 配置解析别名：在 webpack.config.js 中设置
module.exports = {
resolve: {
alias: {
MyUtils: path.resolve(__dirname, "src/utils"),
"@": path.resolve(__dirname, "src"),
},
},
};
// 3. 引入目标模块写的路径变简单了
import { checkUsername, checkPassword } from "MyUtils/check.js";
import { checkUsername, checkPassword } from "@/utils/check.js";