再会webpack，拨开云雾见月明

第一次用Webpack是实战Vue+Webpack打造todo应用中，当时想快速上手Vue-CLI，再加上对Vue和Webpack都不算太了解，初体验挺难受的。毕竟从无到有的接受新知识，很懵逼，再加上使用的版本号和老师的不一样，有的API改了，一路下来自己解决报错真的超崩溃。但不得不说，正是因为难受，印象才会如此深刻。

通过后续的学习，以及其他知识慢慢铺开，才知道为什么要用这些包（知道一个东西有什么作用很简单，但作为学习者，我们更要知道为什么需要有这个作用的东西）。这里整理了常用的包，及其官方使用文档链接，方便查阅。

HTML Webpack Plugin

HTML Webpack Plugin官方使用文档
这是一个用来在dist目录下生成一个index.html文件的插件，它将入口文件中所有相关项（.html，.css，.js等），都汇总在一个html5的文件中，并能对这个最终页面做一些自定义配置。

Webpack-Dev-Server

一个支持热更新的开发者工具，有丰富的api来帮助开发者模拟实际环境。值得注意的是，这种实时更新是在内存中完成的，不会更新dist，因为那样做太慢了！
development模式配置里面会告诉你开发模式要加哪些配置，推荐了几种开发者工具，并告诉你添加完工具后的一些基础配置，简直是保姆级说明。
webpack-dev-server使用说明这篇是介绍webpack-dev-server用法的文档，需要什么功能时，可以进去找。

MiniCssExtractPlugin

MiniCssExtractPlugin是一款抽取CSS文件，将其单独打包的插件，通过<link rel='stylesheet'>的方式插入html头部引入样式。

Style-Loader

style-loader是将css以<style>标签插入html头部的一款加载器。

Sass-Loader、Less-Loader、Stylus-Loader

sass-loader
less-loader
stylus-loader
3款都是用来将stylesheet格式文件解析为CSS的loader，遗憾的是stylus-loader没有被webpack官方文档认领，npm最近一次也是2年前更新的，似乎被弃养。

Vue-Loader

这个就说来话长了~~~原因详见Vue不同版本
首先，vue有一个完整版(Vue.js)和一个运行时版本(Vue.runtime.js)，Vue.js = Vue.runtime.js + compiler。

• 完整版：同时包含编译器和运行时的版本。
• 编译器：用来将模板字符串编译成为 JavaScript 渲染函数的代码。
• 运行时：用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。

二者的区别就是：
用完整版，可以直接在客户端编译模板

new Vue({
  template: '<div>{{ hi }}</div>'
})

用运行时版呢，就必须这么写

new Vue({
  render (h) {
    return h('div', this.hi)
  }
})

因为运行时版本比完整版体积要小大约 30%，所以官方推荐尽可能使用这个运行时版。那编译器的活谁来做呢？这就是Vue-Loader的用处了，它来完成compiler的工作，这样既不占体积，又能干事，挺好！

File-Loader

file-loader的作用是将被引用的文件变为能够被src或href理解的文件路径。
例如，你想要使用一张图片，如果直接填写图片在本地的路径是不顶用的，因为打包后的图片路径和名字早就变了，file-loader就是让x等于打包后的路径，这样图片才会正常显示

import x from './1.jpg'
console.log(x)

Css-Loader

css-loader的作用是帮webpack理解import './x.css'这类语句的，同时，它指定不同的引入形式。

动态import

动态import()读取一个文件，会得到一个promise对象，在发起请求时才会加载数据，实现懒加载

hash、chunkhash、contenthash

• hash是基于整个项目内容生成的一串散列值，只要是同一个项目，文件的hash全部一样，不利于缓存标识。
• chunkhash是基于同一个块生成的一串散列值，只要是同一个块的内容，文件的chunkhash都一样。如：index.js中有import './1.css'，那么打包后的1.css对应文件和index.js对应文件的chunkhash相同，同样不利于区分样式缓存及逻辑代码缓存。
• contenthash基于文件内容生成的一串散列值，每个文件的contenthash都不一样，最适合用来做缓存标识。