【经典】 webpack打包流程及原理?

ops/2024/11/20 11:18:47/

webpack打包流程及原理

Webpack 是一个模块打包工具,它可以分析项目的依赖关系,将这些依赖转换和打包为合适的格式以供浏览器使用。以下是 Webpack 打包流程的简化版:

  1. **初始化:**读取 webpack 配置文件,创建 compiler 对象。

  2. **配置:**读取配置文件中的入口和插件选项。

  3. **编译:**开始从入口文件开始解析文件,并将所有文件解析为模块。

  4. **构建模块:**使用 loaders 转换文件,然后进行打包。

  5. **输出:**输出打包后的资源到指定的目录。

以下是一个简单的 Webpack 配置示例:

javascript">const path = require('path');module.exports = {entry: './src/index.js', // 入口文件output: {filename: 'bundle.js', // 输出文件名path: path.resolve(__dirname, 'dist'), // 输出目录},module: {rules: [{test: /\.css$/, // 正则表达式,匹配 CSS 文件use: ['style-loader', 'css-loader'], // 使用的 loader},{test: /\.js$/,exclude: /node_modules/,use: {loader: 'babel-loader', // 使用 Babel 转换 ES6options: {presets: ['@babel/preset-env'],},},},],},plugins: [// 在这里配置插件],mode: 'development', // 开发模式
};

在这个配置中,Webpack 会处理 src 目录下的 index.js 文件作为入口,将其依赖的 CSS 和 JavaScript 文件转换并打包到 dist 目录下的 bundle.js 文件中。开发模式会生成未压缩的代码,方便开发调试


http://www.ppmy.cn/ops/135218.html

相关文章

pytest在conftest.py中实现用例执行失败进行截图并附到allure测试报告

conftest.py文件简介 conftest.py文件用于定义共享设置、夹具和钩子函数。 可以跨.py文件调用,有多个.py文件调用时,可让conftest.py只调用了一次fixture,或调用多次fixture; conftest.py与运行的用例要在同一个pakage下&#xf…

前后端交互之动态列

一. 情景 在做项目时,有时候后会遇到后端使用了聚合函数,导致生成的对象的属性数量或数量不固定,因此无法建立一个与之对应的对象来向前端传递数据,这时可以采用NameDataListVO向前端传递数据。 Data Builder AllArgsConstructo…

【蓝桥杯C/C++】I/O优化技巧:cin.tie(nullptr)的详解与应用

文章目录 💯前言💯I/O流的基本概念💯cin.tie(nullptr)使用场景底层机制与ios::sync_with_stdio(false) 的搭配使用手动刷新输出流 💯使用示例和性能对比示例代码 💯常见误区和注意事项进一步优化:快速输入输…

【视觉SLAM】4b-特征点法估计相机运动之PnP 3D-2D

文章目录 0. 前言1. PnP求解1.1 直接线性变换DLT1.2 P3P1.3 光束平差法BA2. 实现0. 前言 透视n点(Perspective-n-Point,PnP)问题是计算机视觉领域的经典问题,用于求解3D-2D的点运动。换句话说,当知道 N N N个世界坐标系中3D空间点的坐标以及它们在图像上的投影点像素坐标…

Centos 7 修改YUM镜像源地址为阿里云镜像地址

安装 wget 1 yum install -y wget 进入目录 1 cd /etc/yum.repos.d/ 创建目录 1 mkdir backup 默认源配备份 1 mv C* backup/ 下载阿里云yum源 1 wget -O /etc/yum.repos.d/CenOS-Base.repo https://mirrors.aliyun.com/repo/Centos-7.repo 清除旧缓存 1 yum c…

homework系列

(4)输出整数各位数字:输人一个整数number&#xff0c;从高位开始逐位分割并输出它的各位 数字。试编写相应程序。 输人输出示例 Enter a number:123456 输出 1 2 3 4 5 6 #include <iostream>int main() {int m 0, i 1, j 1, k 1;int count 0;printf("Enter …

在Ubuntu上部署Open WebUI和Ollama,打造你的私人GPT

在Ubuntu上部署Open WebUI和Ollama&#xff0c;打造你的私人GPT 如果你对自然语言处理或者构建自己的对话AI感兴趣&#xff0c;那么这篇文章就是为你准备的。我将带你一步步搭建Open WebUI和Ollama&#xff0c;让你在自己的服务器上就能体验到强大的语言模型。 简介 Ollama是…

C++类和对象(下)

文章目录 1. 初始化列表1.1 什么是初始化列表1.2 为什么要引入初始化列表1.3 初始化列表如何写1.3.1 显式写初始化列表1.3.2 隐式写初始化列表1.3.2.1 不声明缺省值1.3.2.2 声明缺省值 1.3.3 初始化列表总结 2.类型转换2.1 内置类型与自定义类型转换2.2 自定义类型间的转换2.3 …