这是我参与「第五届青训营」笔记创作活动的第8天。
Loader
Loader 直译为"加载器"。Webpack 将⼀切⽂件视为模块，但是 Webpack 原⽣是只能解析 js ⽂件，如果想将其他⽂件也打包的话，就会⽤到 loader 。 所以Loader的作⽤是让 Webpack 拥有了加载和解析⾮ JavaScript ⽂件的能⼒。
Loader 在 module.rules 中配置，也就是说他作为模块的解析规则⽽存在。类型为数组，每⼀项都是⼀个 Object，⾥⾯描述了对于什么类型的⽂件（test），使⽤什么加载（loader）和使⽤的参数（options），运行在打包文件之前。
常⻅的 Loader
file-loader：把⽂件输出到⼀个⽂件夹中，在代码中通过相对 URL 去引⽤输出的⽂件
url-loader：和 file-loader 类似，但是能在⽂件很⼩的情况下以 base64 的⽅式把⽂件内容注⼊到代码中去
source-map-loader：加载额外的 Source Map ⽂件，以⽅便断点调试
image-loader：加载并且压缩图⽚⽂件
babel-loader：把 ES6 转换成 ES5
css-loader：允许在 js 中 import 一个 css 文件，会将 css 文件当成一个模块引入到 js 文件中
style-loader：能够在需要载入的 html 中创建一个标签，标签里的内容就是 CSS 内容。
eslint-loader：通过 ESLint 检查 JavaScript 代码
注意： 在 Webpack 中，loader 的执行顺序是从右向左执行的。因为 webpack 选择了 compose 这样的函数式编程方式，这种方式的表达式执行是从右向左的。
Plugin
Plugin 直译为"插件"。Plugin 可以扩展 webpack 的功能，让 webpack 具有更多的灵活性。 在 Webpack 运⾏的⽣命周期中会⼴播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。
Plugin 在 plugins 中单独配置。 类型为数组，每⼀项是⼀个 plugin 的实例，参数都通过构造函数传⼊。plugins 在整个编译周期都起作用.
常⻅的 Plugin
define-plugin：定义环境变量
html-webpack-plugin：简化html⽂件创建
uglifyjs-webpack-plugin：通过 UglifyES 压缩 ES6 代码
webpack-parallel-uglify-plugin: 多核压缩，提⾼压缩速度
webpack-bundle-analyzer: 可视化 webpack 输出⽂件的体积
mini-css-extract-plugin: CSS提取到单独的⽂件中，⽀持按需加载
热更新
模块热替换(HMR - Hot Module Replacement)功能会在应用程序运行过程中替换、添加或删除模块，而无需重新加载整个页面。主要是通过以下几种方式，来显著加快开发速度：
- 保留在完全重新加载页面时丢失的应用程序状态。
- 只更新变更内容，以节省宝贵的开发时间。
- 调整样式更加快速 - 几乎相当于在浏览器调试器中更改样式。
个人总结
Webpack 就是一个快递箱，将不能运行的语言打包换成可运行的语言。可以多多运用插件，有待实践。
