webpack插件安装经历： 插件安装前 自行百度其官网及论坛上的利弊介绍
生产环境用到的插件： --save-dev
webpack：即webpack核心库
webpack-cli：此工具用于在命令行中运行 webpack
webpack-cli 是 webpack 的命令行工具。
让我们可以不用写打包脚本，只需配置打包配置文件，然后在命令行输入 webpack-cli --config webpack.config.js 来使用 webpack, 简单很多。
webpack 4 之前命令行工具是集成在 webpack 包中的，4.0 开始他们已经将两者分开来更好的管理它们。
webpack-serve ：是 webpack 提供的用来开发调试的服务器--不要用了，很久没人维护了
webpack-dev-server：开发服务器
webpack-dev-server 实际上相当于启用了一个express的Http服务器+调用webpack-dev-middleware。
它的作用主要是用来伺服资源文件。这个Http服务器和client使用了websocket通讯协议，原始文件作出改动后，webpack-dev-server会用webpack实时的编译，再用webpack-dev-middleware将webpack编译后文件会输出到内存中。适合纯前端项目，很难编写后端服务，进行整合。
大多数 webpack 用户用过的 webpack-dev-server 就是一个 express＋webpack-dev-middleware 的实现。二者的区别仅在于 webpack-dev-server 是封装好的，除了 webpack.config 和命令行参数之外，很难去做定制型开发。而 webpack-dev-middleware 是中间件，可以编写自己的后端服务然后把它整合进来，相对而言比较灵活自由。
webpack-dev-middleware 输出的文件存在于内存中。你定义了 webpack.config，webpack 就能据此梳理出entry和output模块的关系脉络，而 webpack-dev-middleware 就在此基础上形成一个文件映射系统，每当应用程序请求一个文件，它匹配到了就把内存中缓存的对应结果以文件的格式返回给你，反之则进入到下一个中间件。
因为是内存型文件系统，所以重建速度非常快，很适合于开发阶段用作静态资源服务器；因为 webpack 可以把任何一种资源都当作是模块来处理，因此能向客户端反馈各种格式的资源，所以可以替代HTTP 服务器。事实上，大多数 webpack 用户用过的 webpack-dev-server 就是一个 express＋webpack-dev-middleware 的实现。二者的区别仅在于 webpack-dev-server 是封装好的，除了 webpack.config 和命令行参数之外，很难去做定制型开发。而 webpack-dev-middleware 是中间件，可以编写自己的后端服务然后把它整合进来，相对而言比较灵活自由。
webpack-hot-middleware：是一个结合webpack-dev-middleware使用的middleware，它可以实现浏览器的无刷新更新（hot reload），这也是webpack文档里常说的HMR（Hot Module Replacement）。HMR和热加载的区别是：热加载是刷新整个页面。
webpack-merge：webpack 配置合并
vue-loader
vue-template-compiler：模板预编译,先理解为.vue项目的预编译文件
html-webpack-plugin：html 模板解析插件---该插件将为你生成一个 HTML5 文件， 其中包括使用 script 标签的引入的所有包文件。
一个强大的html管理插件，可以用于生成html，可以配置模板，灵活的配置chunk。
clean-webpack-plugin：编译输出文件前，删除旧文件---一个比较普及的管理插件
mini-css-extract-plugin：这个插件将CSS解压到单独的文件中。它为每个包含CSS的JS文件创建一个CSS文件。
用于提取CSS，并进行分别打包，虽然有mini，但是意思不是压缩CSS，如需压缩还需要其他的插件配置。
extract-text-webpack-plugin：该插件在是webpack****3的，webpack4中不能用
babel-core：babel 的核心编译器
这是老版本别再按装了， babel-preset-env 是一个配置文件，我们可以使用这个配置文件转换 ES2015/ES2016/ES2017 到 ES5
新版本： @babel/preset-env
babel-loader：webpack本身就能够处理.js文件，但无法对ES2015+的语法进行转换，babel-loader对使用了ES2015+语法的.js文件进行处理。
@babel/core：babel-core的作用在于提供一系列api。这便是说，当webpack使用babel-loader处理文件时，babel-loader实际上调用了babel-core的api
optimize-css-assets-webpack-plugin：css代码压缩，优化css结构，利于网页加载和渲染
uglifyjs-webpack-plugin：js代码压缩
file-loader：解析图片，字体等
file-loader可以解析项目中的url引入（不仅限于css），根据我们的配置，将图片拷贝到相应的路径，再根据我们的配置，修改打包后文件引用路径，使之指向正确的文件。 ---用于管理JS中导入的资源或者CSS中引用的资源路径。
url-loader
如果图片较多，会发很多http请求，会降低页面性能。url-loader会将引入的图片编码，生成dataURl。相当于把图片数据翻译成一串字符。再把这串字符打包到文件中，最终只需要引入这个文件就能访问图片了。当然，如果图片较大，编码会消耗性能。因此url-loader提供了一个limit参数，小于limit字节的文件会被转为DataURl，大于limit的还会使用file-loader进行copy。
注意
1、url-loader依赖file-loader
2、当使用url-loader加载图片，图片大小小于上限值，则将图片转base64字符串；否则使用file-loader加载图片，都是为了提高浏览器加载图片速度。
3、使用url-loader加载图片比file-loader更优秀
所以--两个插件都要使用，除非url-loader不设置limit选项，但这样转换大图很浪费时间，并不好。
（url-loader中内置了 file-loader 所以当使用 url-loader的时候，可以不使用 file-loader）--网上也有这种说法
image-webpack-loader :图片压缩
关于图片压缩还有像 img-loader 和 imagemin-webpack-plugin 等其实底层调用的接口都是类似的。
CSS 基础 loader（可以在.js文件中引入css文件）
css-loader ：加载.css文件
options:
- alias: 解析别名
- importLoader(@import)
- Minimize: true or false,是否开启css代码压缩，比如压缩空格不换行。
- modules：是否开启css-modules
style-loader：使用<style>将css-loader内部样式注入到我们的HTML页面
options:
- attrs: 添加自定义 attrs 到 style 标签
- insertAt:插入位置
- insertInto: 插入到指定dom
- singleton:类型为布尔值，多个样式是否只生成一个<style></style>标签。
CSS 前处理 less 两件套
less
less-loader
CSS 前处理 sass 两件套
node-sass ：因为sass-loader依赖node-sass所以需要安装
sass-loader
CSS 后处理 postcss 两件套
postcss-loader
autoprefixer
purifycss-webpack 打包编译时，可剔除页面和js中未被使用的css，这样使用第三方的类库时，只加载被使用的类，大大减小css体积
progress-bar-webpack-plugin 打包编译时，显示进度条
估计多数不常用的插件：
HappyPack ：https://github.com/amireh/happypack ---优化webpack打包速度
由于运行在 Node.js 之上的 Webpack 是单线程模型的，所以Webpack 需要处理的事情需要一件一件的做，不能多件事一起做。 我们需要Webpack 能同一时间处理多个任务，发挥多核 CPU 电脑的威力，HappyPack 就能让 Webpack 做到这点，它把任务分解给多个子进程去并发的执行，子进程处理完后再把结果发送给主进程。
由于 JavaScript 是单线程模型，要想发挥多核 CPU 的能力，只能通过多进程去实现，而无法通过多线程实现。
提示：由于HappyPack 对file-loader、url-loader 支持的不友好，所以不建议对该loader使用。
cross-env:让这一切变得简单，cross-env能跨平台地设置及使用环境变量，不同平台使用唯一指令，无需担心跨平台问题。
npm i --save-dev cross-env
在npm脚本(多是package.json)里这么配置
{
"scripts": {
"build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js"
}
}
