-
主要配置
javascriptimport path from "path"; const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { entry: "./src/index.js", //入口文件 output: { //出口文件 path: path.resolve(__dirname, "dist"), filename: "bundle.js", }, mode: "development", //模式 // development 开发模式速度块,内置调试工具 // production 生产模式,打包慢,会进行压缩优化 // none 原始模式 plugins: [ //plugin 配置区域 new HtmlWebpackPlugin({ //它是一个类,需要实例化,作用是把html文件处理以及打包到我们的出口 template: path.join(__dirname, "./index.html"), }), ], module: { // loader 配置区域 rules: [ //规则数组 { test: /\.js$/, //匹配需要处理的文件类型 exclude: /node_modules/, //排除目录 include: /src/, //包含目录 use: [ //use多个loader 处理使用数组,单个loader使用字符串或者对象 "style-loader", // 插入 <style> 这里默认配置 "css-loader", // 解析 CSS 这里使用默认配置 { loader: "sass-loader", // 转换 Sass → CSS 手动配置 options: { //loader 需要的参数 loader实现内部 使用 loader-uitls 的 getOptions获取 sourceMap: true, }, }, ], }, ], }, }; -
loader对比plugin
- loader 把不同的文件翻译成webpack 能理解的模块,在文件被导入(import/require)的时候触发;
- plugin是在webpack 的生命周期中做扩展或者优化。
-
手写loader
javascript//一个简单的markdown转html //配置webpack.config { test: /\.md$/, exclude: /node_modules/, use: { loader: path.resolve(__dirname, "loader/md-loader.js"), }, }, // loader/md-loader 文件 import { marked } from 'marked'; export default (source) => { const html = marked.parse(source); return `module.exports = ${JSON.stringify(html)}`; //转出html字符串 }; // index.js使用 import readme from "./readme.md"; //md const div = document.createElement("div"); div.innerHTML = readme; document.body.appendChild(div); -
手写plugin
javascript// 自定义一个构建的时间的监控 // plugin/build-time.js class BuildTimePlugin { constructor(options) { this.options = options; this.startTime = null; } apply(compiler) { //compiler 提供了很多钩子供我们使用 compiler.hooks.beforeRun.tap("BuildTimePlugin", () => { this.startTime = Date.now(); console.log("开始构建..."); }); compiler.hooks.done.tap("BuildTimePlugin", stats => { const endTime = Date.now(); const buildTime = (endTime - this.startTime) / 1000; console.log(`构建完成!耗时: ${buildTime.toFixed(2)}s`); }); } } export default BuildTimePlugin; // webpack.config import BuildTimePlugin from "./plugin/build-time.js"; plugins: [ new HtmlWebpackPlugin({ template: path.join(__dirname, "index.html"), meta: { charset: { charset: "UTF-8" }, //防止乱码 viewport: "width=device-width, initial-scale=1.0", }, }), new BuildTimePlugin(), //构建时间监控 new CleanWebpackPlugin() //自动删除输出目录中的旧文件,确保输出目录只包含最新的构建文件 ], -
webpack运行机制
-
初始化阶段
- 合并命令行参数和配置文件
- 创建Compoler, 核心编译器实例,控制构建的生命周期
- 注册插件(plugin),调用插件的apply方法,挂载到各个钩子上
-
编译阶段
- 入口解析,从entry 出发
- 模块构建
- 读取文件内容
- loader 处理
- AST 分析,webpack内部解析为AST, 分析依赖关系
- 依赖收集,找到所有导出的模块(import/require)
- 递归对于模块进行上述模块构建的步骤
- module.exports.pitch 函数的执行顺序相反
- chunk生成,根据代码分割规则将模块分组到不同的chunk
-
optimization中配置代码分割规则
javascriptoptimization:{ splitChunks: { chunks: 'all', } }
-
-
输出阶段
- 将chunk转换为最终的文件内容
- 将生成的js、css 等写入输出目录
-
-
HMR 热更新
- devServer 启动 注入 HMR runtime
- 页面首次加载建立一个 ws 连接
- webpcak 监听文件变化,会执行变化模块的complier,增量更新,并且推送hash 和 ok 事件
- 浏览器接收到 ok 事件,会拉取更新清单以及更新代码
- 加载更新的模块
- 执行模块的 module.hot.accept() 回调函数
构建工具webpack
开心不就得了2025-10-04 16:19
相关推荐
西洼工作室9 分钟前
Strapi快速入门:从安装到API开发光影少年22 分钟前
前端线上出现白屏如何排查问题所在,利用第三方的工具都有哪些濑户川26 分钟前
Vue3 计算属性与监听器:computed、watch、watchEffect 用法解析_Sem35 分钟前
KMP实战:从单端到跨平台的完整迁移指南Carry34537 分钟前
React 与 Vue 开发差异——CSS 样式前端九哥40 分钟前
我删光了项目里的 try-catch,老板:62301_7644413341 分钟前
身份证校验工具4Forsee1 小时前
【Android】View 事件分发机制与源码解析一 乐1 小时前
车辆管理|校园车辆信息|基于SprinBoot+vue的校园车辆管理系统(源码+数据库+文档)百锦再2 小时前
Python、Java与Go:AI大模型时代的语言抉择