Webpack基础使用

目录

一.什么是Webpack

二.为什么要使用Webpack

三.Webpack的使用

1.下载yarn包管理器

2.Webpack的安装

3.Webpack的简单使用

4.效果

四.Webpack打包流程


一.什么是Webpack

Webpack是一个静态模块打包工具

二.为什么要使用Webpack

在开发中,我们常常会遇到:

  • 使用sass和less语法书写样式需要转译
  • 使用es6及更高版本的语法来简化代码,浏览器无法识别
  • 项目体积大,不利于上线

webpack就可以解决上述问题:

  • 支持所有类型文件的打包
  • 支持less/sass => css
  • 支持ES6/7/8 => ES5
  • 压缩代码, 提高加载速度

由此可见,webpack就是前端开发人员技术库中的必需品

三.Webpack的使用

在使用前需要安装node环境

1.下载yarn包管理器

npm i -g yarn

2.Webpack的安装

首先创建项目文件夹并在项目文件夹内初始化包环境

yarn init -y

安装 webpack 依赖包

yarn add webpack webpack-cli -W -D

在 package.json 中, 配置 scripts 自定义打包命令

javascript 复制代码
scripts: {
	"build": "webpack"
}

3.Webpack的简单使用

新建 src/js.js ,写入并导出需要打包的代码,例如:

javascript 复制代码
export const add = (a, b) => a + b

新建 src/index.js 导入使用

javascript 复制代码
// webpack打包的入口
import { add } from './js'
console.log(add(2, 3));

运行自定义打包命令

yarn build

4.效果

生成 dist 目录(与src文件夹同级)和其中的 main.js 文件

javascript 复制代码
(()=>{"use strict";console.log(5)})();

四.Webpack打包流程

  • 解析配置文件:Webpack 会读取并解析配置文件(通常是 webpack.config.js 文件),并根据配置生成一个 Compiler 对象
  • 读取入口文件:Webpack 根据配置中的入口文件,读取这些文件及其依赖的模块,并将它们组成一个依赖图
  • 解析模块依赖:Webpack 会根据模块之间的依赖关系,递归地解析它们的依赖,直到所有的依赖都被解析完毕
  • 加载模块:Webpack 会根据模块的路径,使用相应的 Loader 加载模块的源代码,并将其转换为 Webpack 可以处理的形式。
  • 转换代码:Webpack 会根据配置中的插件,对加载的模块进行一系列的转换操作,比如压缩、合并、优化等
  • 生成代码:Webpack 会将所有模块转换后的代码合并成一个或多个文件,并输出到指定的输出目录中
相关推荐
独立开阀者_FwtCoder4 分钟前
"页面白屏了?别慌!前端工程师必备的排查技巧和面试攻略"
java·前端·javascript
慧一居士5 分钟前
Vite 完整功能详解与 Vue 项目实战指南
前端·vue.js
南岸月明5 分钟前
不聊主业,聊聊你们眼中的副业是什么样的?
前端
Kevin在掘金9201410 分钟前
c#、.net、Fluent UI Blazor
前端
LovelyAqaurius11 分钟前
RSA加密算法:从数学魔法到现实守护
前端
Hilaku13 分钟前
说实话,React的开发体验,已经被Vue甩开几条街了
前端·javascript·vue.js
蛋黄蛋黄16 分钟前
微信表情怎么在自己的项目使用微信表情?-> [开源仓库]wechat-emoji
前端·github
汪子熙17 分钟前
错误剖析:net::ERR_HTTP2_PROTOCOL_ERROR 200 (OK) 的含义与解决之道
前端
猩猩程序员19 分钟前
Rust 1.88 稳定支持裸函数:更安全简洁的汇编函数写法
前端
艾克马斯奎普特20 分钟前
为什么响应性语法糖最终被废弃了?尤雨溪也曾经试图让你不用写 .value
前端·vue.js·代码规范