参考文档：
https://juejin.im/post/5a2123765188253ee45b3e8a
https://webpack.docschina.org/loaders/style-loader/
https://github.com/webpack-contrib/mini-css-extract-plugin
https://www.jianshu.com/p/91e60af11cc9
https://www.npmjs.com/package/node-notifier
css-loader：
css-loader 主要用于处理图片路径（包括导入 css 文件的路径），并且会将 css 样式打包进 js 文件中（以模块的形式打包导入）。
style-loader:
style-loader 通过 <style> 标签将 css 插入到 DOM 中。建议 style-loader 与 css-loader 结合使用。
postcss-loader:
postcss-loader 我们编写 css 时为了兼容不同浏览器会加上前缀比如 -webkit 等。postcss 会帮我们自动加上前缀，不用一个一个的手动添加。
sass-loader:
加载 sass/scss 文件并且变异成 css。
vue-loader:
Vue Loader 是一个 webpack 的 loader，它允许你以一种名为单文件组件 (SFCs)的格式撰写 Vue 组件。
<template>
<div class="example">{{ msg }}</div>
</template>
<script>
export default {
data () {
return {
msg: 'Hello world!'
}
}
}
</script>
<style>
.example {
color: red;
}
</style>
注意：
Vue Loader 的配置和其它的 loader 不太一样。除了通过一条规则将 vue-loader 应用到所有扩展名为 .vue 的文件上之外，请确保在你的 webpack 配置中添加 Vue Loader 的插件：
// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
module: {
rules: [
// ... 其它规则
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [
// 请确保引入这个插件！
new VueLoaderPlugin()
]
}
这个插件是必须的！ 它的职责是将你定义过的其它规则复制并应用到 .vue 文件里相应语言的块。例如，如果你有一条匹配 /\.js$/ 的规则，那么它会应用到 .vue 文件里的 <script> 块。
vue-loader 中文文档
vue-style-loader:
vue-style-loader 是基于 style-loader 的，与 style-loader 相似，你可以链式的加在 css-loader 后面，通过 <style> 标签动态的将 css 注入到 document 中。因为它会作为一个内置的依赖被vue-loader 使用，所以通常你不需要自己手动的配置它。
但是如果要支持 Vue SSR 的话，你最好使用 vue-style-loader。当我们以 node 为 target 打包，所有渲染的组件里的 样式会被收集起来并且以 context.styles 暴露给 Vue render context。这样你就可以简单的把样式插入到 <head> 标签中了。
mini-css-extract-plugin:
mini-css-extract-plugin 将 css 提取为独立的文件，对每个包含 css 的js文件都会
创建一个 css 文件。支持按需加载 css 和 sourceMap。暂不支持 HMR。
这个插件应该只用在 production 配置中，并且在 loaders 链中不适用 style-loader，特别是在开发中使用 HMR，因为这个插件暂不支持 HMR。
node-notifier:
node-notifier 是 node 模块，用 node.js 发送跨平台（包括 maxOS、Windows、Linux）的原生的通知。
- macOS: >= 10.8 for native notifications, or Growl if earlier.
- Linux: notify-osd or libnotify-bin installed (Ubuntu should have this by default)
- Windows: >= 8, or task bar balloons for Windows < 8. Growl as fallback. Growl takes precedence over Windows balloons.
- General Fallback: Growl
uglify-webpack-plugin:
压缩 javascript
https://www.npmjs.com/package/uglifyjs-webpack-plugin
https://blog.csdn.net/u013884068/article/details/83511343
optimize-css-assets-webpack-plugin
optimize-css-assets-webpack-plugin 用于优化压缩 css 资源。
它会在 webpack 构建时找到 css 资源，并且优化压缩。解决
https://www.npmjs.com/package/optimize-css-assets-webpack-plugin CSS
clean-webpack-plugin：
由于一些历史遗留代码会导致我们的 /dist 目录相当杂乱，webpack打包会生成文件，然后将这些文件放置在 /dist 文件中，但是 webpack 无法追踪到哪些文件实际在项目中用到的。
通常，在每次构建前清理 /dist 文件夹，是比较推荐的做法，因此只会生成用到的文件。clean-webpack-plugin 就很符合这种场景。通过配置，我们可以实现每次构建前清理 /dist 文件夹。当然，它作为一个普及的管理插件，还可以清除些别的，比如日志啥的。
https://www.kancloud.cn/xiaoyulive/webpack/531352
但是在配置时，我发现没起作用，github 上有位老兄解决了我的问题。
The plugin is working as intended. It's trying to delete the dist folder from the location of the config file (being webpack/common.js). Since you specified your output path to path.resolve(__dirname, '../dist'), you should change the root path accordingly (default: __dirname):
new CleanWebpackPlugin(['dist'], {
root: path.join(__dirname, '..')
})
大致意思好像是它的路径是相对于配置文件的目录来配的。
eslint-loader:
让 webpack 支持 eslint。
eslint-friendly-formatter:
能够对 eslint 提示进行格式化（显示更为友好）并且生成报告。对于 subline text 和 iterm2 很友好，能够根据提示点开文件（具体是哪个文件报出提示）。但我觉得对 vs code 也挺友好的。
当我们使用 eslint 来校验我们的代码时，有一点不方便，就是错误报告对 终端支持不友好。我们不能通过编辑器直接点开报错文件，也不能直接定位到行。eslint-friendly-formatter 就解决了这个问题。
babel-polyfill:
babel 默认只转换新的 javascript 句法。而不转换新的 API，比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象，以及一些定义在全局对象上的方法（比如 Object.assign）都不会转码。
举例来说，ES6在Array对象上新增了Array.from方法。Babel就不会转码这个方法。如果想让这个方法运行，必须使用babel-polyfill，为当前环境提供一个垫片。
https://blog.csdn.net/chjj0904/article/details/79169821
svg-sprite-loader:
创建 SVG 雪碧图。
https://segmentfault.com/a/1190000015367490
https://www.npmjs.com/package/svg-sprite-loader
file-loader:
如果我们希望在页面引入图片（包括img的src和background的url）。当我们基于webpack进行开发时，引入图片会遇到一些问题。
其中一个就是引用路径的问题。拿background样式用url引入背景图来说，我们都知道，webpack最终会将各个模块打包成一个文件，因此我们样式中的url路径是相对入口html页面的，而不是相对于原始css文件所在的路径的。这就会导致图片引入失败。这个问题是用file-loader解决的，file-loader可以解析项目中的url引入（不仅限于css），根据我们的配置，将图片拷贝到相应的路径，再根据我们的配置，修改打包后文件引用路径，使之指向正确的文件。
url-loader:
将 文件转换成 base64 URI。
要求 node >= v6.9.0 且 webpack >= v4.0.0。
url-loader 功能与 file-loader 相似，但是如果文件小于一个 指定的大小他可以返回一个 DataURL。
另外，如果图片较多，会发很多http请求，会降低页面性能。这个问题可以通过url-loader解决。url-loader会将引入的图片编码，生成dataURl。相当于把图片数据翻译成一串字符。再把这串字符打包到文件中，最终只需要引入这个文件就能访问图片了。当然，如果图片较大，编码会消耗性能。因此url-loader提供了一个limit参数，小于limit字节的文件会被转为DataURl，大于limit的还会使用file-loader进行copy。
url-loader和file-loader是什么关系呢？简答地说，url-loader封装了file-loader。url-loader不依赖于file-loader，即使用url-loader时，只需要安装url-loader即可，不需要安装file-loader，因为url-loader内置了file-loader。通过上面的介绍，我们可以看到，url-loader工作分两种情况：1.文件大小小于limit参数，url-loader将会把文件转为DataURL；2.文件大小大于limit，url-loader会调用file-loader进行处理，参数也会直接传给file-loader。因此我们只需要安装url-loader即可。
https://blog.csdn.net/qq_38652603/article/details/73835153
https://www.npmjs.com/package/url-loader
**webpack.ProvidePlugin: **
自动加载模块，而不必到处 import 和 require。
copy-webpack-plugin:
把我们自己建的文件或是整个目录复制到打包目录下。
https://www.npmjs.com/package/copy-webpack-plugin
webpack-bundle-analyzer:
会给你打包后的 bundles 创建一个可交互的 树形映射图，来查看究竟打包了写什么，哪些体积比较大等，便于优化。像这样。
image.png
网友评论