本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。
1、为什么需要webpack
我们写的React、Vue，ES6 模块化语法，Less/Sass 等 css 预处理器等语法在浏览器运行必须经过编译成浏览器能识别的 JS、Css 等语法，才能在浏览器上运行。此外，webpack还能压缩代码、做兼容性处理、提升代码性能等等。
2、基本使用
它会以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去。 输出的文件就是编译好的文件，就可以在浏览器端运行了。
如下图，根据依赖关系，它会将将你项目中所需的每一个模块组合成一个或多个 bundles，我们将 Webpack 输出的文件叫做 bundle。
（2.1）功能介绍
Webpack 本身功能是有限的:
- 开发模式：仅能编译 JS 中的
ES Module语法 - 生产模式：能编译 JS 中的
ES Module语法，还能压缩 JS 代码
Webpack 本身功能比较少，只能处理 js 资源，所以我们学习 Webpack，就是主要学习如何处理其他资源。
（2.2）核心概念
- 入口（entry）
入口起点(entry point) 指示 webpack 应该使用哪个模块，来作为构建其内部 依赖图(dependency graph) 的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。
也就是确定依赖关系的源头；
默认值是 ./src/index.js，但你可以通过在 webpack configuration 中配置 entry 属性，来指定一个（或多个）不同的入口起点。
module.exports = {
entry: './path/to/my/entry/file.js',
};
- 输出(output)
output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。
也就是指定打包要输出到哪儿。
你可以通过在配置中指定一个 output 字段，来配置这些处理过程：
const path = require('path');
module.exports = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js',
},
};
- loader
webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。其它资源需要借助 loader，Webpack 才能解析，以供应用程序使用，以及被添加到依赖图中。
使用：
const path = require('path');
module.exports = {
output: {
filename: 'my-first-webpack.bundle.js',
},
module: {
// test 属性，识别出哪些文件会被转换。
// use 属性，定义出在进行转换时，应该使用哪个 loader。
rules: [{ test: /.txt$/, use: 'raw-loader' }],
},
};
- 插件(plugin)
loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。
在webpack打包的整个生命周期中，提供一系列生命钩子，扩展 Webpack 的功能。
// 1、引入
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
module: {
rules: [{ test: /.txt$/, use: 'raw-loader' }],
},
// 2、调用
plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};
- 模式(mode)
通过选择 development, production 或 none 之中的一个，来设置 mode 参数，你可以启用 webpack 内置在相应环境下的优化（例如production模式下会对js进行压缩）。其默认值为 production。
module.exports = {
mode: 'production',
};
3、快速入门
我们以处理css资源为例子，实现一个简单的打包过程；
（3.1）初始化工程项目
npm init
（3.2）下载webpack
npm install webpack webpack-cli -D
（3.3）下载loader
npm i css-loader style-loader -D
（3.4）创建工程目录，可以写一些demo代码
webpack_code # 项目根目录（所有指令必须在这个目录运行）
└── src # 项目源码目录
├── js # js文件目录
│ ├── count.js
│ └── sum.js
└── main.js # 项目主文件
（3.5）创建webpac.config.js
const path = require("path");
module.exports = {
entry: "./src/main.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "main.js",
},
module: {
rules: [
{
// 处理css资源
// css-loader：负责将 Css 文件编译成 Webpack 能识别的模块
// style-loader：会动态创建一个 Style 标签，里面放置 Webpack 中 Css 模块内容
test: /.css$/,
use: ["style-loader", "css-loader"],
},
],
},
plugins: [],
mode: "development",
};
（3.6）执行 npx webpack，在dist目录下查看效果。
这里暂时没有处理html，所以得在模板html先手动引入下main.js
4、总结
webpack是什么，为什么要用，五大核心概念，入门demo
