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

链接: https://fly63.com/article/detial/5739