今天，跟大家来谈谈webpack的相关知识，webapck的基本介绍这里就不细说了，（是什么、基本使用、常见配置）请查看官方链接： https://www.webpackjs.com/
学习webpack前提条件：
1. 环境参数：node.js 10版本以上、webpack 4.26版本以上
2.基本技能：基本nodejs知识、npm指令、熟悉es6语法
webpack的五个核心概念：
1.entry: 入口； 从哪个文件作为入口起点开始打包，分析内部依赖图
2.output: 出口； 打包后输出到哪里，以及叫什么名字
3.loader: 翻译；处理那些非js和json文件（webpack默认只认识js、json文件）
4.plugins: 插件； 打包优化、压缩，做一些功能强大的事情
5.mode: 模式；分为两种，development和production （开发和生产模式，生产模式 插件比开发模式多得多）
webpack初体验：
1.下载安装（全局安装）： npm i webpack 和 npm i webpack-cli -g 全局安装（-g）
2. 本地（项目安装）: npm i webpack webpack-cli -D（-D：开发依赖，是--save -dev的简写）
验证 webpack能够 处理js文件
1. npm i webpack webpack-cli -D
2. 新建文件夹及文件
>build
>src
index.js: 打包入口起点文件
在index.js中书写代码：
function add(x+y){
return x + y;
}
console.log(add(1,2));
运行指令（开发环境指令）： webpack ./src/inndex.js -o ./build/buils.js --mode=development
输入上述命令，打包完成后文件介绍：
Hash:f9412844ecsfsd82 每次打包都会生成一个唯一的哈希值;以后可以作为文件命名
Version：webpack 4.41.6 webpack的版本
Time: 70ms 时间
Built at: 2020-02-15 15:11:49 打包的具体时间
Asset Size Chunks Chunk Names
built.js 4.18Kib main
运行指令（生产环境指令）： webpack ./src/inndex.js -o ./build/buils.js --mode=production
验证 webpack能够 处理json文件
在src下新建data,json
{
"name":"kb",
"age":42
}
在 index.js中 引入 data.json
import data from "./data.json";
console.log(data);
重启（注意：每次修改webpack都需要重启）：webpack ./src/inndex.js -o ./build/buils.js --mode=development
在index.html 中引入打包后的资源
<script src="./built.js"></script>
我们都知道 webpack默认只认识 javascript和json文件；那样式资源、html资源、图片资源如何处理呢，这就需要用到
webpack打包样式资源：
webpack打包html资源：
webpack打包图片资源：