npm 和 npx
npm npdejs 的包仓库+包管理器，他的痛点是 全局安装包会产生版本冲突，需要手动配置path 来执行相关命令，临时工具使用不便
npx nodejs 的包执行器 无需安装，直接运行，内置与 npm 中，npx 会智能执行流程 执行命令，并且临时安装执行，还可以指定版本执行，直接运行 github 代码 ，交互式命令选择
| 维度 | npm | npx |
|---|---|---|
| 主要用途 | 包管理（安装、卸载、发布） | 包执行（运行命令） |
| 安装位置 | node_modules（本地）或全局 | 临时缓存（默认） |
| 持久性 | 永久安装 | 临时使用（可缓存） |
| 版本管理 | 通过 package.json 锁定版本 | 可指定任意版本运行 |
| 全局污染 | 全局安装会污染环境 | 几乎无污染 |
| 执行速度 | 首次安装慢，后续快 | 首次下载慢，缓存后快 |
| 典型命令 | npm install、npm run |
npx create-react-app |
| 诞生时间 | 2010年 | 2017年（npm@5.2.0） |
| 包含关系 | 独立工具 | npm 的一部分（捆绑发布） |
指定webpack 文件，可使用 npx webpack --config xx.js
webpack 只知道处理 js 文件和 json 文件，所以在处理其他文件时，就需要用到 loader ，loader 可以帮助webpack处理其他类型的文件，因此遇到 jpg 文件时，我们可以在 module 下设置
module:{
rules:[{
test:/\.jpg$/,
use:{
loader:'file-loader'
}
}]
},loader 的执行顺序是，从下到上，从右到左
webpack 如果需要定位到错误代码，可以将 devtool 改成 source-map 这样就能定位到错误代码
HMR 热模块更新
每次更新在原有基础上改，而不是刷新页面重新加载，开启 devServer 选项 中的 hot:true 即可
Babel 的作用是 将 ES6 语法转为 ES5 的语法（因为不是所有的浏览器都支持 ES6）
babel-polyfill 将缺失的特性加到浏览器中