webpack的学习复习笔记，包括（webpack使用、webpack配置、webpack服务器等）

---

前言

本文包含 webpack 使用等内容，参考于 黑马PPT 通过自己理解整理，所以这是一篇用于小白新手入门，或者复习使用的笔记，主要包括（webpack使用、webpack配置、webpack服务器等）
如有做的不好的地方，敬请谅解，欢迎指出，持续更新改正

————————————————
版权声明：本文为CSDN博主「: 。」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_60896381/article/details/125615136

---

一 webpack基本概念

$$思考$$

• 问题1: 以前写完的网站, 文件很多, 体积很大?
• 问题2: 有没有一种自动整合, 压缩, 剔除无用代码技术?

---

1. 我们为什么学习webpack

1. 减少文件数量
2. 缩减代码体积
3. 提高浏览器打开的速度

---

$$思考$$

• 问题1: 我们手动能否压缩代码呢?
• 问题2: 能否找个模块来, 翻译, 压缩, 打包合并代码?

2. webpack基本概述

webpack本质是, 一个第三方模块包, 用于分析, 并打包代码

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

---

3. 总结

什么是webpack呢? 作用是什么? 目的是?

1. 它是一个模块包
2. 识别代码, 翻译, 压缩, 整合打包
3. 提高打开网站的速度

---

二 webpack使用步骤

1. 基本使用

使用webpack需要做哪些准备工作?

1. 初始化文件夹包环境, 得到package.json文件
2. 下载webpack等模块包
3. 在package.json自定义命令, 为打包做准备

---

2. 案例: 2个js文件 ->打包成1个js文件

需求： 2个js文件 ->打包成1个js文件

分析：

1. 新建src下的资源
2. add.js – 定义求和函数并导出
3. index.js – 引入add模块并使用函数输出结果
4. 执行 yarn build 自定义命令, 进行打包 (确保终端路径在src的父级文件夹)
5. 打包后默认生成dist和main.js, 观察其中代码

$$总结$$
webpack如何使用

1. 默认src/index.js – 打包入口文件
2. 需要引入到入口的文件才会参与打包
3. 执行 package.json 里 build 命令, 执行 webpack 打包命令
4. 默认输出 dist/main.js 的打包结果

---

3. 案例: webpack再次打包

需求：代码更多后, 如何打包

分析：