webpack常用加载器、插件总结，看这一篇就够了
前言
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
webpack学习的一个比较难的点便是它的配置与配置的组合，本文总结了webpack中的常用，主流的配置，并简单介绍了webpack在项目中的应用。可以帮助初学者快速的定位所需要的功能，当然每个加载器（loader）插件（plugins）的功能详解用法限于篇幅不能展示，建议大家去npm官网查看其最新配置。
因为这方面内容较多，本文会不断迭代。大家可以收藏加关注，并在评论中指出优化的地方。非常感谢
注意：本文基于webpack4
npm官网地址：https://www.npmjs.com/ babel：https://www.babeljs.cn/
1.常用loader及功能
babel-loader @babel/code @babel/preset-env babel-polyfill(严格上是个插件)
js语法转换工具，可以将ES6或更高级的语法转换成浏览器支持的语法
css-loader
处理入口文件中的css
style-loader
处理文件模块中的style样式
postcss-loader
第一个就是前面提到的把 CSS 解析成 JavaScript 可以操作的 抽象语法树结构（Abstract Syntax Tree，AST），第二个就是调用插件来处理 AST 并得到结果。
file-loader
处理引入的静态文件，可以按目录分类
url-loader
同file-loader，处理引入的静态文件，还可以把小文件转换为base64格式的URL，从而减少网络请求次数。url-loader依赖file-loader。
eslint-loader
语法检测loader，会在打包或编译的时候提示语法问题
2.常用插件及功能
autoprefixer
一款自动管理浏览器前缀的插件，它可以解析CSS文件并且添加浏览器前缀到CSS内容里，使用Can I Use（caniuse网站）的数据来决定哪些前缀是需要的。
html-webpack-plugin
当使用 webpack 打包时，创建一个 html 文件，并把 webpack 打包后的静态文件自动插入到这个 html 文件当中。
mini-css-extract-plugin
将CSS提取为独立的文件的插件，对每个包含css的js文件都会创建一个CSS文件，支持按需加载css和sourceMap
optimize-css-assets-webpack-plugin
压缩优化css
uglifyjs-webpack-plugin
压缩优化js
webpack-dev-server
启动一个本地临时的服务器，可以设置端口，支持热更新（将HotModuleReplacementPlugin插入到进程中），
CleanWebpackPlugin
能帮忙每次打包之前先删除dist文件夹。
copyWebpackPlugin
可以把其他的文件或文件夹拷贝到打包文件里
bannerPlugin（webpack）
版权字符串
ignorePlugin
忽略掉引入的包
webpack-merge
可以抽取出 开发与生产环境的相同的webapck配置。vue里的配置文件dev.config.js， prod.config.js就基于这个插件
html-withimg-plugin
处理html中的img
definePlugin
定义环境变量
dllPlugin
在一个额外的独立的 webpack 设置中创建一个只有 dll 的 bundle(dll-only-bundle)。 这个插件会生成一个名为 manifest.json 的文件，这个文件是用来让 DLLReferencePlugin 映射到相关的依赖上去的。
DLLReferencePlugin
这个插件是在 webpack 主配置文件中设置的， 这个插件把只有 dll 的 bundle(们)(dll-only-bundle(s)) 引用到需要的预编译的依赖。
happypack
多线程打包
3.开发中常用的功能
跨域解决
webpack-dev-server中有proxy代理
webpack-dev-server中有before(mock功能)拦截请求模拟数据
使用中间件webpack-dev-middleware把本地的webpack配置到server
路径简写
reslove :{
alias:{
'img':resolve('src')
}
}
- import xxx form '../../../aaa'
+ import xxx form '@/aaa'热更新
webpack-dev-server 中配置inline：true
或添加插件webpack.HotModuleReplacementPlugin(),
懒加载
添加插件@babel/plugin-syntax-dynamic-import
let button = document.createElement("button");
button.innerText = "播放";
button.addEventListener("click", function() {
// es6 草案中的语法， 用jsonp实现动态加载文件, 需要插件@babel/plugin-syntax-dynamic-import
import("./source.js").then(data => {
// promise对象
console.log(data.default); // 挂载在了default属性上
});
});
document.body.appendChild(button);4.webpack打包优化
既能提升速度，又能减小体积
1去除映射文件sourceMap
devtool：false
2外部引用cdn
速度优化
1大文件预打包
dllPlugin DLLReferencePlugin
2多线程打包
happypack
3babel-loader开启缓存
// webpack.config.js
use: [{
loader: 'babel-loader',
options: {
cacheDirectory: true
}]// .bablerc
{
"presets": [
"env",
"react"
],
"plugins": ["transform-runtime"]}
4resolve ailas添加常用包的路径
体积优化
1按需加载
babel-plugin-import
2写代码时使用import引入而不是require
3异步加载资源
const Foo = () => import('./Foo.vue')；
4抽离公共模块
optimization splitchunks