铭文真义
一种前端资源构建工具，一个静态模块打包器。它会根据模块的依赖关系进行静态分析，打包生成对应的静态资源。
五大神将
1、entry:打包入口
入口指示webpack以哪个文件为入口起点开始打包，分析构建内部依赖图
2、output:打包出口
输出（output）指示webpack打包后的资源bundles输出到哪里去，以及如何命名
3、loader:
loader让webpack能够去处理那些非JS文件（webpack自身只能解析js/json）
4、plugins:插件
插件plugins可以用于执行范围更广的任务，插件的范围包括：从打包优化到压缩，一直到重新定义环境中的变量等
5、mode：模式
模式（mode）指示webpack使用相应模式环境配置
development : 本地调试运行的环境
production ： 能让代码优化上线运行的环境
箴言：
1、webpack能处理js/json资源，不能处理css/img等资源
2、生产环境和开发环境奖ES6模块化编译成浏览器能识别的模块化～
3、生产环境比开发环境多了一个压缩代码的过程（生产打包出的文件体积更小）
解禁（打包指示命令-终端）：
webpack 入口文件路径 -o 出口文件路径 --mode=(development:本地调试环境；production：生产环境；两者二选一)
实战：
webpack.config.js
webpack配置文件
作用：运行【webpack】命令时，会加载里面的配置
所有构建工具都是基于node.js平台运行的
模块化采用commonJS
入门配置(webpack.config.js)：
const { resolve } = require("path");
module.exports = {
entry:"./src/index.js",
output:{
pathname:"build.js", //输出的文件名
path:resove(__dirname,"build")
},
//loader
module:{
rules:[
{
test:/\.css$/, //匹配以css结尾的文件
use:["style-loader","css-loader"], //use数组中loader执行顺序：从右到左，从下到上，依次执行（多个资源用use，单个资源用loader）
// css-loader :将css文件变成commonjs模块加载到js中，里面内容是样式字符串
// style-loader：创建style标签，将js中的样式资源插入进行，添加到head中生效
}
]
},
//plugins的配置
plugins:[],
mode:"development", //开发模式（development:开发模式；production：生产环境）
}
这个打包没有html文件需在终端执行：
webpack ./src/index.js -o ./build/build.js --mode=development
才可以打包
附魔：loader配置中，不同文件必须配置不同的loader处理
例如：处理css文件就要下载 css-loader 、 style-loader依赖
less文件要下载4个依赖：less、less-loader、css-loader、style-loader