1、webpack 是基于 node.js 运行的项目打包工具。
概念 | webpack 中文文档 | webpack中文文档 | webpack中文网 (webpackjs.com)
webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。
2、webpack是一个静态资源打包工具。它会以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去。输出的文件就是编译好的文件，就可以在浏览器端运行了。我们将webpack输出的文件叫做bundle。
3、webpack五大核心概念
1、entry（入口）：指示webpack从哪个文件开始打包
2、output（输出）：指示webpack打包完的文件输出到哪里去，如何命名等
3、loader（加载器）：webpack本身只能处理js、json等资源，其他资源需要借助loader，webpack才能解析
4、plugins（插件）：扩展webpack的功能
5、mode（模式）：只要有两种模式：开发模式（development）、生产模式（production）
4、
1、入口（entry）：入口起点指示webpack应该使用哪个模块，来作为构建内部依赖图的开始。
进入入口起点后，webpack会找出有哪些模块和库是入口起点（直接和间接）依赖的
2、输出：output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。
主要输出文件的默认值是 `./dist/main.js`，其他生成文件默认放置在 `./dist` 文件夹中。
// 项目根目录 webpack.config.js
5、先开发开发模式，再开发生产模式
开发模式顾名思义就是我们开发代码时使用的模式。
这个模式下我们主要做两件事：第一件事：编译代码，使浏览器能识别运行。开发时我们有样式资源、字体图标、图片资源、html资源等，webpack默认都不能处理这些资源，所以我们要加载配置来编译这些资源。第二件事：代码质量检查，树立代码规范。提前检查代码的一些隐患，让代码运行时能更加健壮。提前检查代码规范和格式，统一团队编码风格，让代码更优雅美观。
6、
// src下面的main是项目的入口文件，也是定义了webpack的入口文件
// 想要webpack打包资源，必须引入该资源
import count from "./js/count";
import sum from "./js/sum";
// 想要webpack打包资源，必须引入该资源
import "./css/iconfont.css";
import "./css/index.css";
import "./less/index.less";
import "./sass/index.sass";
import "./sass/index.scss";
import "./stylus/index.styl";
const result = count(2, 2);
console.log(result);
console.log(sum(1, 2, 3, 4));
7、处理CSS资源、处理less资源、处理sass资源、处理stylus资源、处理图片资源、处理字体图标资源、处理其他资源。
8、自动清空上次打包内容
// 输出
output: {
// 所有文件的输出路径
// __dirname nodejs的变量，代表当前文件的文件夹目录
path: path.resolve(__dirname, "../dist"), // 绝对路径
// 入口文件打包输出文件名
filename: "static/js/main.js",
// 自动清空上次打包内容
// 原理：在打包前，将path整个目录内容清空，再进行打包
clean: true,
},
