这是我参与「第五届青训营 」伴学笔记创作活动的第 15 天

什么是Webpack

Webpack 本质上是一个前端西元编译、打包工具。

它会以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去。

输出的文件就是编译好的文件，就可以在浏览器段运行了。

我们将 Webpack 输出的文件叫做 bundle。

功能介绍

Webpack 本身功能是有限的:

• 开发模式：仅能编译 JS 中的 ES Module 语法
• 生产模式：能编译 JS 中的 ES Module 语法，还能压缩 JS 代码

使用webpack

下载依赖

打开终端，来到项目根目录。运行以下指令：

• 初始化package.json

npm init -y

此时会生成一个基础的 package.json 文件。

需要注意的是 package.json 中 name 字段不能叫做 webpack , 否则下一步会报错

• 下载依赖

npm i webpack webpack-cli -D

启用 Webpack

• 开发模式

npx webpack ./src/main.js --mode=development

• 生产模式

npx webpack ./src/main.js --mode=production

npx webpack: 是用来运行本地安装 Webpack 包的。

./src/main.js: 指定 Webpack 从 main.js 文件开始打包，不但会打包 main.js，还会将其依赖也一起打包进来。

--mode=xxx：指定模式（环境）。

核心流程

怎么使用Webpack

关于Webpack的使用方法，基本都围绕“配置”展开，而这些配置大致可以分为两类：

• 流程类：作用于流程中某个或若干个环节，直接影响打包效果的配置项
• 工具类：主流程之外，提供更多工程化能力的配置项

HMR

HMR称为热模块替换，在程序运行中，替换、添加或删除模块，而无需重新加载整个页面。

Tree-shaking

Tree Shaking 是一个术语，通常用于描述移除 JavaScript 中的没有使用上的代码。

注意：它依赖 ES Module 。

开发时我们定义了一些工具函数库，或者引用第三方工具函数库或组件库。

如果没有特殊处理的话我们打包时会引入整个库，但是实际上可能我们可能只用上极小部分的功能。

这样将整个库都打包进来，体积就太大了。

理解loader

Webpack只认JS，为了处理非标准JS资源，设计出的资源翻译模块—loader，用于将资源翻译为JS

loader的链式调用：

常见loader

理解插件

Webpack本身也是基于插件做的，所以说没有插件就没有Webpack