当前位置： 首页 > news >正文

Webpack模块打包工具

news 2025/4/29 4:06:45 
1. 认识webpack的基本用法步骤创建项目->下载webpack webpack-cli -> npm init -y -> package.json的scripts中配置webpack默认打包入口：src/index.js默认打包出口: dist/main.js2. 认识webpack.config.js的基本配置loader  -> 打包css，less,sass,图片，es6转es5plugins -> 自动生成html并且将打包的js注入进去entryoutputmode: 'none'

Webpack模块打包工具

webpack_demo 工程化从0-1配置完整版.rar

本章节通过从0到1的方式来配置出一个【工程化】项目结构，让大家了解Node+Webpack是如何做工程化配置的。

学完本章节后，你能知道工程化的基本原理，为将来使用vue的工程化开发打下基础

Webpack基本概念

Webpack 是一个静态模块（如 JavaScript 文件、样式表、图片等）打包工具，从入口构建依赖图，打包有关的模块，将这些模块组合成少量的捆绑包（通常是单个文件），以便在浏览器中高效加载和执行。

Webpack 的作用：对静态模块的内容进行压缩，整合，转译等操作（前端工程化）

    • 把 less/sass 转成 css 代码
    • 把 ES6+ 降级成 ES5 等
    • 支持多种模块文件类型，多种模块标准语法

体验Webpack打包

需求：封装 utils 包，校验用户名和密码长度，在 index.js 中使用，使用 Webpack 打包

需求流程图：

步骤：

  1. 新建项目文件夹 webpack_demo，初始化包环境，得到 package.json 文件
npm init -y
  1. 新建 src 源代码文件夹（书写代码）包括 utils/check.js 封装用户名和密码长度函数，引入到 src/index.js 进行使用
    • src/utils/check.js
/*** 目标：封装检验用户名和密码长度的函数*/
export const checkUserName = uname => {return uname.length >= 8
}
export const checkPassWord = pwd => {return pwd.length >= 6
}
    • src/index.js
/*** 目标：引入工具函数使用*/
import { checkUserName, checkPassWord } from './utils/check.js'
const unameResult = checkUserName('itheima007')
const pwdResult = checkPassWord('7654321')
console.log(unameResult, pwdResult)
  1. 下载 webpack webpack-cli 到项目（版本独立）
npm i webpack webpack-cli --save-dev

需要把 webpack 命令配置到 package.json 的 scripts 自定义命令，作为局部命令使用

  1. 项目中运行工具命令，采用自定义命令的方式（局部命令）
npm run build

npm run 跟上package.json中的scripts中自定义命令名字

注意：实际上在终端运行的是 build 右侧的具体命名

  1. 自动产生 dist 分发文件夹（压缩和优化后，用于最终运行的代码）

总结：

  1. 使用webpack的基本流程
    1. 创建一个空白文件夹，使用 npm init -y初始化package.json文件
    2. 准备你想要开发功能的各种模块代码(index.js utlis/check.js)
    3. 使用 npm i webpack webpack-cli
    4. 在package.json的scripts节点配置好： "build":"webpack"
    5. 打开终端，执行 npm run build 自动根据入口查找相关的依赖，最终打包
  1. webpack的默认查找方式
    a. 默认会查找src这个目录中的index.js （入口路径）
    1. 默认的输出路径: dist/main.js

修改 Webpack 打包入口和出口

  1. Webpack 配置：影响 Webpack 打包过程
  1. 步骤：
    1. 项目根目录，新建 webpack.config.js 配置文件
    1. 导出配置对象，配置入口，出口文件路径
const path = require('path')
module.exports = {mode: 'none', // 不压缩，方便查看打包后的app.js中的代码entry: path.resolve(__dirname, 'src/main.js'), // 入口output: { // 出口path: path.resolve(__dirname, 'dist'),filename: 'app.js',clean: true // 先清空 dist，然后再输出最新内容}
}
    1. 重新打包观察
  1. 图解：

案例-注册用户-长度判断

需求：点击注册按钮，判断用户名和密码长度是否符合要求

  1. 步骤：
    1. 新建 public/index.html 准备网页模板（方便查找标签和后期自动生成 html 文件做准备）
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我是一个网页</title>
</head><body><div class="box"><div class="img-wrap"><img class="logo-img" src="" alt=""></div><div class="login-wrap"><form action="javascript:;"><div class="form-item"><span>用户名：</span><input type="text" class="username"></div><div class="form-item"><span>密码：</span><input type="password" class="password"></div><div class="form-item"><button class="login-btn">注 册</button></div></form></div></div>
</body></html>

    1. 核心 JS 代码写在 src/main.js 打包入口文件
/*** 目标：点击注册，检验用户名和密码长度*/
document.querySelector('.login-btn').addEventListener('click', () => {const username = document.querySelector('.username').valueconst password = document.querySelector('.password').valueif (!checkUserName(username)) {alert('用户名长度要大于等于8位')return} else if (!checkPassWord(password)) {alert('密码长度要求大于等于6位')return}console.log('用户名和密码长度符合要求')
})
    1. 运行自定义命令，让 Webpack 打包 JS 代码
    1. 手动复制 index.html 到 dist 下，手动引入打包后的 JS 代码文件，运行 dist/index.html 在浏览器查看效果

Webpack 自动生成 html 文件

  1. 插件 html-webpack-plugin 作用：在 Webpack 打包时生成 html 文件，并引入其他打包后的资源
  1. 步骤：
    1. 下载 html-webpack-plugin 本地软件包到项目中
npm i html-webpack-plugin --save-dev
    1. 配置 webpack.config.js 让 Webpack 拥有插件功能
// ...
const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {// ...plugins: [ // 插件列表new HtmlWebpackPlugin({minify:false, //true：压缩html(默认为true)  false：不压缩html template: path.resolve(__dirname, 'public/index.html') // 以指定的 html 文件作为生成模板})]
};
    1. 指定以 public/index.html 为模板复制到 dist/index.html，并自动引入其他打包后资源
  1. 运行打包命令，观察打包后 dist 文件夹下内容并运行查看效果

05.Webpack-打包 css 代码

Webpack 默认只识别 JS 和 JSON 文件内容，所以想要让 Webpack 识别更多不同内容，需要使用加载器

  1. 介绍需要的 2 个加载器来辅助 Webpack 才能打包 css 代码
    • 加载器 css-loader：解析 css 代码
    • 加载器 style-loader：把解析后的 css 代码插入到 DOM（style 标签之间）
  1. 步骤：
    1. 准备 css 文件引入到 src/main.js 中（压缩转译处理等）
.box{width: 300px;height: 300px;margin: 50px auto;
}.login-btn{background-color: #0094ff;width: 200px;height: 30px;
}form{height: 100px;display: flex;flex-direction: column;justify-content: space-between;
}
/*** 目标：引入 css 文件内容*/
import './css/index.css'

注意：这里css只是引入代码内容让 Webpack 处理，不需定义变量接收在 JS 代码中继续使用，所以没有定义变量接收

    1. 下载 css-loader 和 style-loader 本地软件包
npm i css-loader style-loader --save-dev
    1. 配置 webpack.config.js 让 Webpack 拥有该加载器功能
// ...module.exports = {// ...module: { // 加载器rules: [ // 规则列表{test: /\.css$/i, // 匹配 .css 结尾的文件use: ['style-loader', 'css-loader'], // 使用从后到前的加载器来解析 css 代码和插入到 DOM}]}
};
    1. 运行npm run build 打包后运行 dist/index.html 观察效果，看看准备好的样式是否作用在网页上

06.Webpack-打包 less 代码

LESS是一种 CSS 预处理器，它扩展了 CSS 的功能，允许开发者使用变量、嵌套规则、等特性来编写更简洁、更易维护的css。

@color:#00ff00;
.box{width: 300px;height: 300px;margin: 50px auto;.login-btn{background-color: @color;width: 200px;height: 30px;}form{height: 100px;display: flex;flex-direction: column;justify-content: space-between;}}

通过 LESS 编写的代码需要通过webpack转换成标准的 CSS 代码，以便浏览器能够理解并应用

  1. 加载器 less-loader：把 less 代码编译为 css 代码，还需要依赖 less 软件包
  1. 步骤：
    1. 准备 less 样式引入到 src/main.js 中
@color:#00ff00;
.box{width: 300px;height: 300px;margin: 50px auto;.login-btn{background-color: @color;width: 200px;height: 30px;}form{height: 100px;display: flex;flex-direction: column;justify-content: space-between;}}
/*** 目标：引入 less 文件内容*/
import './css/index.less'
    1. 下载 less 和 less-loader 本地软件包
npm i less less-loader --save-dev
    1. 配置 webpack.config.js 让 Webpack 拥有功能
// ...module.exports = {// ...module: { // 加载器rules: [ // 规则列表// ...{test: /\.less$/i,use: [// compiles Less to CSS'style-loader','css-loader','less-loader',],},]}
};
    1. 打包后运行 dist/index.html 观察效果

Webpack-打包图片

样式中导入图片

  1. 资源模块：Webpack 内置了资源模块的打包，无需下载额外 loader即可自动解析
  1. 步骤：
    1. 准备图片素材到 src/assets 中（存放资源模块 - 图片/字体图标等）
    1. 在 index.less 中给 body 添加背景图
body{background-image: url(../assets/background.png);
}
  1. npm run build观察结果 ->成功

js中import导入图片

  1. 在 main.js 中给 img 标签添加 logo 图片,webpack需要额外配置规则
/*** 目标：要给 img 标签设置一个 logo 图片* 注意：再赋予给 img 的 src 属性图片的时候，需要把图片数据对象引入过来*/
import imgObj from './assets/logo.png'
document.querySelector('.logo-img').src = imgObj
    1. 配置 webpack.config.js 让 Webpack 拥有打包图片功能
// ...module.exports = {// ...module: { // 加载器rules: [ // 规则列表// ...{ // 针对资源模块（图片，字体文件，图标文件等）处理test: /\.(png|jpg|jpeg|gif)$/i,type: 'asset', // 根据文件大小（8KB）小于：把文件转成 base64 打包进 js 文件中（减少网络请求次数）大于：文件复制到输出的目录下generator: { // 输出文件时，路径+名字filename: 'assets/[hash][ext]'}}]}
};
    1. 打包后运行 dist/index.html 观察效果

注意：

    • 小于 8KB 文件会被转成 data URI（base64 字符串）打包进 JS 文件中（好处：可以减少网络请求次数，缺点：增加 30% 体积）
    • 大于 8KB 文件会被复制到 dist 下，自动替换使用代码的图片名字

Webpack 集成 babel 编译器

  1. babel 定义：是一个 JavaScript 语法编译器，将采用 ES6语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中

ES5 和 ES6 是 ECMAScript（JavaScript 的标准）的两个不同的重要版本，它们代表了语言特性和语法的发展的两个阶段。

ES5 (ECMAScript 5) 发布日期：2009年，它引入了一些新的方法和特性，比如：

ES5 引入了许多数组实用方法，如 forEach, map, filter, reduce ；内置了 JSON 解析

ES6 (ECMAScript 2015) 发布日期：2015年，它带来了很多新特性：

let 和 const，箭头函数，模板字符串，解构赋值， 模块化(import 和export)

  1. babel-loader：让 Webpack 可以使用 babel 转译 JavaScript 代码
  1. 步骤：
    1. 编写一段映射数组元素，每个数值 + 1 的代码（要求用箭头函数）
/*** 目标：让 Webpack + Babel 编译降级 JS 语法*/
//✨✨✨ es6写法
const arr = [1, 2, 3]
const result = arr.map(val => val + 1)
console.log(result)// ✨✨✨es5写法
var arr = [1, 2, 3]
var result = arr.map(function (val) {return val + 1
});
console.log(result)
    1. 下载 babel babel-loader core 本地软件包
npm i babel-loader @babel/core @babel/preset-env -D
    1. 配置 webpack.config.js 让 Webpack 拥有功能
// ...module.exports = {// ...module: { // 加载器rules: [ // 规则列表// ...{test: /\.js$/,exclude: /(node_modules)/, // 排除指定目录里的 js （不进行编译降级）use: {loader: 'babel-loader',options: {presets: ['@babel/preset-env'] // 预设规则}}}],}
};
    1. 打包运行 dist/index.html 观察效果
  1. 各个软件包的作用表格：

模块

作用

@babel/core

Js 编译器，分析代码

@babel/preset-env

babel 预设，规则

babel-loader

让 webpack 翻译 js 代码

Webpack 打包模式

  1. 打包模式：告知 Webpack 使用相应模式的内置优化
  2. 分类：

模式名称

模式名字

特点

开发模式

development

调试代码，实时加载，模块热替换等

生产模式

production

压缩代码，资源优化，更轻量等

  1. 如何设置影响 Webpack呢？
    • 方式1：在 webpack.config.js 配置文件设置 mode 选项
// ...module.exports = {// ...mode: 'production'
}
    • 方式2：在 package.json 命令行设置 mode 参数
"scripts": {"build": "webpack --mode=production","dev": "webpack  --mode=development"
},

注意：命令行设置的优先级高于配置文件中的，推荐用命令行设置

Webpack 开发服务器

  1. 每次改动代码，都要重新打包，很麻烦，所以这里给项目集成 webpack-dev-server 开发服务器
  1. 作用：启动 Web 服务，打包输出源码在内存，并会自动检测代码变化热更新到网页
  1. 步骤；
    1. 下载 webpack-dev-server 软件包到当前项目
npm i webpack-dev-server --save-dev
    1. 配置自定义命令，并设置打包的模式为开发模式
"scripts": {// ..."dev": "webpack serve --open --mode=development"
},
    1. 使用 npm run dev 来启动开发服务器，访问提示的域名+端口号，在浏览器访问打包后的项目网页，修改代码后试试热更新效果

在 js / css 文件中修改代码保存后，会实时反馈到浏览器

【字节二面-面试题】你是如何优化webpack打包速度的？

  1. 使用webpack-dev-server 来优化
  2. 它优化的原理是什么？使用它之前，webpack默认是全量打包，文件越多，打包速度越慢，使用上webpack-dev-server之后，它会监控项目文件内容的改变，当文件内容有改变，只重新打包改变的部分，是增量打包，打包内容少，速度就快

案例-注册用户-完成功能

需求：使用工程化的方式，完成注册用户功能的开发

  1. 步骤：
    1. 使用 npm 下载 axios
npm i axios
    1. 引入到 src/main.js 中编写业务实现
/*** 目标：基于 axios 完成注册用户功能*/
import axios from 'axios'
document.querySelector('.login-btn').addEventListener('click', () => {const username = document.querySelector('.username').valueconst password = document.querySelector('.password').valueif (!checkUserName(username)) {alert('用户名长度要大于等于8位!!!')return} else if (!checkPassWord(password)) {alert('密码长度要求大于等于6位')return}console.log('用户名和密码长度符合要求')axios({url: 'http://hmajax.itheima.net/api/register',method: 'POST',data: {username,password}}).then(result => {alert(result.data.message)}).catch(error => {alert(error.response.data.message)})
})
    1. 打包后运行 dist/index.html 观察效果

注册用户功能图解：

Webpack 开发环境调错 source map

  1. source map：可以准确追踪 error 和 warning 在原始代码的位置
  1. 问题：代码被压缩和混淆，无法正确定位源代码位置（行数和列数）
  1. 设置：webpack.config.js 配置 devtool 选项
// ...module.exports = {// ...devtool: 'inline-source-map'
}

inline-source-map 选项：把源码的位置信息一起打包在 JS 文件内

✨✨注意：source map 适用于开发环境，不要在生产环境使用（防止被轻易查看源码位置）

Webpack 设置解析别名路径

  1. 解析别名：配置模块如何解析，创建 import 或 require 的别名，来确保模块引入变得更简单
  1. 例如：
    1. 原来路径如下：
import { checkUsername,  checkPassword } from '../src/utils/check.js'
    1. 配置解析别名：在 webpack.config.js 中设置
// ...module.exports = {// ...resolve: {alias: {MyUtils: path.resolve(__dirname, 'src/utils'),'@': path.resolve(__dirname, 'src')}}
}
    1. 这样我们以后，引入目标模块写的路径就更简单了
import { checkUsername,  checkPassword } from 'MyUtils/check.js'
import { checkUsername,  checkPassword } from '@/utils/check.js'
  1. 修改代码的路径后，重新打包观察效果是否正常！

黑马就业平台-webpack工程化改造：

webpack打包.zip

http://www.xdnf.cn/news/162451.html

相关文章：

  • Java基础第五章、面向对象程序设计
  • FastAPI 零基础入门指南：10 分钟搭建高性能 API
  • Linux 系统渗透提权
  • Bento4的安装和简单转码
  • 使用Java 操作 Nginx 配置文件
  • 一致性哈希详解：优雅地扩展分布式系统
  • 反爬加密字体替换机制解析
  • HBase协处理器深度解析：原理、实现与最佳实践
  • 【Qt】信号与槽：构建灵活交互的核心机制
  • JAVAEE初阶01
  • 数据安全和合规性市场分析
  • MES系列-MOM（Manufacturing Operations Management，制造运营管理）
  • Redis为什么不直接使用C语言中的字符串？
  • Eigen迭代求解器类
  • async 和 await 详解
  • 论文阅读：2025 arxiv Aligning to What? Limits to RLHF Based Alignment
  • Lustre/Scade/Swan 语义性质中的因果性分析介绍
  • ES6 Map/WeakMap/Set/WeakSet 全解指南
  • 2软考系统架构设计师：第一章系统架构概述 - 练习题附答案及超详细解析
  • 直接映射例题及解析
  • 大模型微调与蒸馏的差异性与相似性分析
  • 字节跳动开源数字人模型latentsync1.5,性能、质量进一步优化～
  • 1.1.1 用于排序规则的IComparable接口使用介绍
  • 【MinIO实战】MinIO权限策略设置与上传文件时报错Access Denied排查
  • 03.01、三合一
  • CentOS7 部署 Ollama 全栈指南：构建安全远程大模型服务
  • 【Python】Python中的浅拷贝和深拷贝
  • Halcon算子应用和技巧13
  • Spring AI Alibaba - Milvus 初体验，实现知识库效果
  • SDC命令详解：使用reset_design命令重置设计