webpack4/rollup/parcel
为什么要构建工具？
转化es6语法
转化jsx
Css前缀补全/预处理器
压缩混淆
图片压缩
安装 nvm
nvm(Node.js Version Manager)也就是 Node.js 的包管理器，可以通过它方便安装和切换不同的Node.js版本。
./node_modules/.bin/webpack -v 查看羡慕中webpack的版本
通过npm run build运行构建，原理：
模块局部安装会在node_mudules/.bin目录创建软链接
核心概念之entry
单入口：entry是一个字符串
多入口：entry是一个对象
核心概念之output
output用来告诉webpack如何将编译后的文件输出到磁盘。
指定filename——通过占位符确保文件名称的唯一,path就可以了。
核心概念之loaders
webpack开箱即用只支持js和json两种文件类型，通过loaders去支持其他文件类型并且把他们转化成有效的模块，并可以添加到依赖图中。
Loaders本身是一个函数，接受源文件作为参数，返回转换的结果。
注意：默认情况下webpack会开启一个进程进行打包。thread-laoder用于多进程打包js和css。
核心概念之plugins
插件用于打包输出文件的优化，资源管理和环境变量注入。
作用于整个构建过程，也就是构建开始到构建结束都可以使用plugins
使用：放到plugins数组里
核心概念之mode
Mode用来指定当前的构建环境是production , development , none
设置mode 可以使用wenpack内置的函数，默认值为production
解析es6和react jsx
解析es6——babel-loader
babel的配置文件是：.babelrc
资源解析：增加es6的babel preset配置
1.plugins ： 一个plugins对应一个功能
2.preset ：是一系列babel plugins的集合
解析css
Css-loader用于加载.css文件，并且转换成common.js对象
Style-loader将样式通过