解析ES6：babel-loader
整体过程
1. npm i @babel/core @babel/preset-env babel-loader -D
2. .babelrc配置文件
3. webpack配置文件
解析JSX：
1. npm i react react-dom @babel/preset-react -D
2. 添加如下配置: 注意presets是一系列plugins的集合，一个plugin对应一个功能
3.编写测试组件(略)
本部分已上传GitHub
4.npm run build
解析CSS：
1. npm i style-loader css-loader -D
css-loader是解析css的，style-loader是将解析的css引入<style>标签
2.编写并引入css文件
3.配置webpack：注意webpack的loader加载顺序是由后往前，顺序不能颠倒
解析less：
1. npm i less less-loader -D
改写webpack配置，添加'less-loader'
解析图片/字体：file-loader/url-loader
1. npm i file-loader -D
改写webpack配置，添加'file-loader'
url-loader：接受参数，自动进行base64转换，url-loader内部也是使用url-loader
webpack中的文件监听：发现源码发生变化时，自动重新构建新的输出文件
方法1. 启动webpack文件的时候，带上--watch参数，如在package.json中的script对象内添加 "watch":"webpack --watch" ( 缺点，每次编译完成要开发者手动刷新浏览器 )
原理：
方法2. 热更新 webpack-dev-server
WDS不断刷新浏览器，不输出文件，而是存放在内存中，以前是使用使用HotModuleReplacementPlugin插件，需要修改webpack配置文件，新版webpack不需要，只要按照以下方法即可
1. npm install webpack-dev-server --save-dev //新版webpack一定要安装
2. 在package.json中的script对象内添加 "dev":"webpack-dev-server --open"
参考链接：www.cnblogs.com/ifeil/p/990…
- 启动阶段 12AB
- 文件变化：1234
方法3. webpack-dev-middleware
WDM将webpack输出的文件传输给服务器适用于灵活的定制场景
