一.概念
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
二.前端模块化
1、传统的开发模式
场景：有一个复杂的页面，需要小明和小红分别开发其中的部分模块。小明和小红分别写了各自的js文件，最后合并引入，小明的js文件为a.js和c.js；小红的文件为b.js。
存在的问题：小明的a.js中的age >= 18 为true，c.js中的 age>=18为false，小明百思不得其解？？？
原因：变量命名冲突/js加载顺序问题（如果先加载c.js再加载b.js也可以解决问题）
解决方案：匿名函数，声明函数立马调用函数，函数具有作用域变量就隔离了，使用return返回需要给别人访问的成员
(function() {})()
(function(){}())
代码语言：javascript复制// a.js
const moduleA = (function() {
var name = '张三'
var age = 20
if(age >= 18) {
console.log('成年人');
}
return {
name,
age
}
})()// b.js
const moduleB = (function() {
var age = 10
return {
age
}
})()// c.js
console.log(moduleA.age);
if(moduleA.age >= 18) {
console.log('成年人');
}三、webpack配置文件
每次都要输入打包的文件和生成后的地址，比较麻烦，可以使用webpack的配置文件
新建文件【webpack.config.js】
配置文件
require('path'),node自带的一个模块,用来处理路径
entry:入口函数,要处理文件
output:出口,输出文件的位置
resolve()拼接路径
__dirname:node环境全局变量,当前文件的绝对路径
使用终端进入项目根目录，输入命令【webpack】，webpack会自动查找目录下的webpack.config.js文件，读取里面的配置进行打包
######
四、项目管理文件
前面的命令默认去全局配置的找运行依赖，但是一个项目应该有属于自己项目的依赖，而且项目使用了哪些依赖应该记录下来
使用命令初始化【npm init】package.json文件
dependencies：生产环境下，项目运行所需依赖。
devDependencies：开发环境下，项目所需依赖。
scripts：执行 npm 脚本命令简写，比如"start": "xxx xx", 执行 npm start 就是运行 "xxx xx"。
对于webpack本身来说是不具备这些转化功能的，这时候必须使用对应的loader进行处理
大部分的loader都可以在webpack的官网中找到，并且学习相应的用法
如何使用？？？
通过npm安装需要使用的loader
在webpack.config.js的modules关键字下进行配置
五、webpack的loader
我们使用webpack来处理我们写的js代码，并且webpack会自动处理js之间相关的依赖
在实际项目中不仅仅有js文件，还有css、图片，ES6转化ES5，TypeScript转化ES5代码，将less，scss转化css，将jsx，vue文件转化js文件等
