共计 7143 个字符，预计需要花费 18 分钟才能阅读完成。
webpack 中所用到的库与知识点（针对 Vue 框架）
罕用配置项：
根底：
mode：默认 ’development’，’production’, 针对不同的模式，webpack 打包时会采纳不同的插件与打包行为，咱们也能依据不同打包模式来自定义采纳哪些 plugins 或 loader。
context：各配置项门路的上下文，context的默认值是 CWD。举荐将 context 批改为我的项目的根目录，这样能够使得我的项目配置独立于 CWD
output：
filename：打包后的 chunk 的文件名字模式，个别波及代码宰割，多插件，多入口，多 bundle 时根本都要[name], 个别为[name].bundle.js 或[name].js
publicPath: 申请资源时的门路
resolve：
extensions（Array）：对一些拓展类型的解决，能够在援用时无需加后缀
alias（Object）：针对门路的别名
开发模式：
devtool：sourceMap 形式
devServer：
hot: 热更新
proxy: 代理
open：打包后主动关上页面
quiet: true, // necessary for FriendlyErrorsPlugin
生产模式：
optimization.splitChunks：用于 chunk 打包分块配置，针对不同文件夹下的模块进行生成不同块。
罕用库：
webpack-dev-server
开发必备，内置在 webpack 中，通过 devServer 配置来调整
–inline: 启用 inline mode，构建音讯将会在浏览器控制台显示，socket.io 的 client 代码被打包进去，以此来同 webpack-dev-server 进行 websocket 通信从而实现主动编译打包，页面主动刷新性能（默认为 inline）
–iframe: 与 inline mode 绝对应，构建音讯显示在页面中的一个 iframe 元素中
–quiet：不显示打包信息
–compress：开启 gzip 压缩
–progress：显示打包的进度
webpack-merge 用户合并打包配置，在遇到打包状况较多时候，善用配置合并会有很好的成果
rimraf 可用于删除之前的打包文件
ora 可用于在打包过程中在终端显示 spin 圈圈示意正在打包，同时还能设置字体色彩
chalk 能够对终端打印的文字进行款式批改，如批改色彩等
portfinder 端口设置 可用于主动设置端口且不会反复，vue-cli 在开发模式下构建时应用的就是该库
详见：https://zhuanlan.zhihu.com/p/…
modules：
base：
eslint-loader（不久会被废除，迁徙到 EslintWebpackPlugin 上）
babel-loader:
优化相干：use：‘babel-loader?cacheDirectory=true’即可开启缓存
配置：
”stage-2“：反对到 stage- 2 的语法规范
env：
modules：false 为不讲 esmodule 转为 commonjs，默认为 true，如果为 true 会造成 webpack 的 tree-shaking 生效
{
"presets": [
["env", {
"modules": false,
"targets": {"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transform-vue-jsx", "transform-runtime"],
"env": {
"development":{"plugins": ["dynamic-import-node"]
}
}
}
url-loader 将大小低于某一范畴的各种媒体文件转为 dataURL 来防止过多的 http 申请
注：v5 后弃用，请思考应用 asset modules 代替。
svg-sprite-loader 用于解决 icon 图标，生成雪碧图，一方面能够缩小 http 申请，另一方面可能应用 <svg><use> 的形式简略引入 icon
vue-loader（留神，应用该 loader 须要加上对应的 vue-loader-plugin）
json5-loader（将 json 转为 js object 对象）
style 相干:
(style-,MiniCssExtractPlugin.loader,vue-style-),css-,postcss-,less-,sass-,stylus-（留神程序，从右往左，加粗局部随便）
注：style-loader,MiniCssExtractPlugin.loader,vue-style-loader 三者的区别
1 MiniCssExtractPlugin.loader 多用于生产模式中获取独自的 css 文件，而 style-loader 则多用于开发模式因为它将多个 css 注入到 dom 中且更快，vue-style-loader 则是基于 style-loader 并反对 vue 的 ssr
2 MiniCssExtractPlugin.loader 与 style-loader 抵触
3 当存在 htmlWebpackPlungin 时能够不思考 style-loader 插件，它会将 MiniCssExtractPlugin.loader 抽离的文件通过 script 节点注入 html 中，倡议应用插件
可选：
cache-loader（vue 重要） 在一些性能开销较大的 loader 之前增加 cache-loader，以便将后果缓存到磁盘里，成果还是挺不错的。
1 对于 babel-loader 优化：
babel 本身也能够通过缓存优化，所以在成果差不多的状况下，应用本身的就好
2 对于 vue-loader 的优化：
vue-loader 官网有提过对于 cache-loader 的应用，但未提起具体应用详情。具体如下：
{
test: /\.vue$/,
loader: 'vue-loader',
exclude: /node_modules/,
include: resolve('src'),
options: {cacheDirectory: resolve('./cache-loader'), // 缓存
cacheIdentifier: 'cache-loader:{version} {process.env.NODE_ENV}'
}
},
{
test: /\.js$/,
use: [
{
loader: 'cache-loader',
options: {cacheDirectory: resolve('cache-loader'), // 缓存
}
}
],
exclude: /node_modules/,
include: resolve('src')
} thread-loader(可尝试) 对于我的项目宏大，文件较多的可应用该 loader 进行多过程打包
exports-loader 能够导出所有能够拜访的变量，次要还是用于解决之前旧的无奈通过模块化引入的库 api。
plugins：
DefinePlugin：
容许定义全局常量
HotModuleReplacementPlugin（HRM）：
1 当你更新代码后，webpack 会监听到并主动刷新浏览器。然而这样你方才的一些操作记录都会失落，为了不失落原来的操作，只是扭转页面显示，应用 HMR
2 永远不要在生产模式下启用 HRM
3 开发模式下可间接通过 hot 管制热模块开关
Friendly-errors-webpack-plugin：
辨认某些类别的 webpack 谬误，并清理，聚合和优先级，以提供更好的开发人员体验
HtmlWebpackPlugin：
在打包过程中将生成的 bundle 以 script 标签引入到指定 html 文件中，包含 css 抽离插件抽离出的 css 文件
详见：https://github.com/jantimon/h…
SplitChunksPlugin（webpack 自带）：（非常重要，等价于 optimization.splitChunks）
从 v4 开始，移除了 CommonsChunkPlugin 取而代之的是 SplitChunksPlugin
1 外围属性 cacheGroup，其余属性都是围绕着该属性配置的 group 来失效的。通过 group 拆分合并。
正当划分公共模块
进行如下划分:
库和工具 – libs
定制 ui 库与工具 – vender
低频库 / 工具 / 代码 – chunk
业务模块 – entries
2 然而留神 cacheGroup 会与 MinChunkSizePlugin 插件抵触，如果二者都进行配置，会以 MinChunkSizePlugin 为优先。
HashedModuleIdsPlugin 与 NamedChunkPlugin:(重要)
module 与 chunk：
module 是指将代码依照性能拆分，分解成离散功能块。拆分后的代码块就叫做 module。能够简略的了解为一个 export/import 就是一个 module。
chunk 是指代码中援用的文件（如：js、css、图片等）会依据配置合并为一个或多个包，咱们称一个包为 chunk。
HashedModuleIdsPlugin
咱们每次在打包完之后，有时候会发现，即使内容没有变更，然而打包完文件对应 hash 依然扭转了。
这是因为 webpack 外部保护了一个自增的 id，每个 module 都有一个 id。所以当减少或者删除 module 的时候，id 就会变动，导致其它文件尽管没有变动，但因为 id 被强占，只能自增或者自减，导致整个 id 的程序都错乱了。
所以即使有些包对应的代码未扭转，然而调配的 id 产生了变动，所以最初生成的包的内容中也产生了变动，造成了 chunkhash 的扭转。
HashedModuleIdsPlugin 它的原理是基于文件的相对路径生成 moduleId，默认为 4 位。当然也能够自自设定长度等一些配置。这样就防止了下面的状况。
注：NamedModulesPlugin 和 HashedModuleIdsPlugin 原理是雷同的，将文件门路作为 id，只不过没有把门路 hash 而已，实用于开发环境不便调试。不倡议在生产环境配置，因为这样不仅会减少文件的大小（门路个别偶读比拟长），更重要的是会裸露你的文件门路。
NamedChunkPlugin
同理，chunk id 也须要独自解决，须要加上对应的插件，然而该插件比拟坑的是对于懒加载有效，所幸该插件可能传入一个函数
new webpack.NamedChunksPlugin(chunk => {if (chunk.name) {return chunk.name}
const modules = Array.from(chunk.modulesIterable)
if (modules.length > 1) {const hash = require('hash-sum')
const joinedHash = hash(modules.map(m => m.id).join('_'))
let len = nameLength
while (seen.has(joinedHash.substr(0, len))) len++
seen.add(joinedHash.substr(0, len))
return `chunk-${joinedHash.substr(0, len)}`
} else {return modules[0].id
}
}) v5 版本的解决：
v5 版本天然不会对这个问题充耳不闻，早在 2015 年这个问题就开始存在并始终探讨继续了很久的工夫，v5 版本将下面的配置都简化为了如下状况：
默认状况下为这样：
v5 的 module 与 chunk 命名：
在开发模式下，默认启用的新命名代码块 ID 算法为模块提供了可读的名称。模块 ID 由其门路决定，绝对于 context。代码块 ID 由代码块的内容决定。
所以你不再须要应用 import(/* webpackChunkName: "name" */ "module") 来调试。但如果你想管制生产环境的文件名，还是有意义的。
能够在生产环境中应用 chunkIds: "named" 在生产环境中应用，但要确保不要不小心裸露模块名的敏感信息。
TerserWebpackPlugin：（v5 用 7 以下的版本）（v4 用 5 以下的版本 ^4.2.3）
该插件应用 terser 来压缩 js，举荐应用 terser 而不是 uglify 插件，次要是因为 uglify 对于 es6 以上反对成都不够且对于存在的较多 bug 不在保护，所以不宜再应用
MiniCssExtractPlugin：
用于将 css 独自抽离成文件，须要配合 MiniCssExtractPlugin.loader 应用
注：对于 MiniCssExtractPlugin 与extract-text-webpack-plugin，二者都是将 css 抽离成文件，官网曾经阐明 extract-text-webpack-plugin 插件不反对 v4 版本的 webpack，所以 v4 须要抽离 css 请应用MiniCssExtractPlugin
compressionwebpackplugin：（v4 用 7 以下的版本）
目前绝对于 gzip 压缩有更好的 Zopfli 压缩，同样兼容 gzip 格局，然而损耗更低，速度更快。还有一个叫 brotil 压缩，然而目前该模式在服务端的反对不容易实现，且对于 node 版本要求在 11 以上
注：开启压缩会对打包工夫有影响
CssMinimizerWebpackPlugin：（v4 用 2 以下的版本）
1 这个插件应用 cssnano 优化和压缩 CSS
2 就像 optimize-css-assets-webpack-plugin 一样，但在 source maps 和 assets 中应用查问字符串会更加精确，反对缓存和并发模式下运行
EslintWebpackPlugin：
从 eslint-loader 迁徙而来，且 eslint-loader 不久将会被废除。
绝对于 eslint-loader，该插件：
1 更易于配置
2 生成独特的输入报告
3 间接从 eslint 应用缓存
4 只对批改过的文件进行 lint 查看
ImageMinimizerWebpackPlugin（可尝试）
图片压缩插件
PrefetchPlugin
预加载一般的模块申请(module request)，能够让这些模块在他们被 import 或者是 require 之前就解析并且编译
speed-measure-webpack-plugin：（可选）
模块打包工夫剖析，应用该插件会在打包后显示各包所破费工夫
BundleAnalyzerPlugin：（可选）
模块打包大小剖析，应用该插件在打包完后会弹出一个页面剖析各 bundle 各模块的空间占比
EvalSourceMapDevToolPlugin/sourceMapDevToolPlugin：（可选）
1 对 sourceMap 源码映射提供更细粒度的管制
2 你能够间接应用 SourceMapDevToolPlugin/EvalSourceMapDevToolPlugin 来代替应用 devtool 选项，因为它有更多的选项。
I18nWebpackPlugin：（可选）
该插件会在 bundle 的生成过程中进行文案翻译，因而你能够间接将翻译后的 bundle 交付给用户。
LimitChunkCountPlugin（可选，可尝试）
限度包文件最大数量，且当初不再反对最小打包文件限度性能，需要的话应用MinChunkSizePlugin
MinChunkSizePlugin（可选，可尝试）
使每个打包的文件至多都在某一大小之上（倡议 50kb 以上：50000），然而应用该插件会与 splitChunk 抵触造成 splitChunk 文件生效
NormalModuleReplacementPlugin（可选）
容许匹配的文件在构建中被替换，可依据不同行为进行不同替换
NpmInstallWebpackPlugin（可选）
主动装置使用者无需关怀的 npm 包，且可能通过 require 与 import 在工作时主动装置那些缺失的包，举荐开发模式
StylelintWebpackPlugin（可选，可尝试）
webpack 官网提供的 Stylelint 插件
ProgressPlugin (察看，可尝试)：
裸露 webpack 打包构建进度插件
ProvidePlugin（可选）
主动加载配置的模块而无须通过 import 或者 require 引入便可在全局应用该模块，该插件还反对对模块的局部 api 进行导出，这样能很好的利用 tree shaking。
<img src=”/Users/liuliuziyang/Desktop/WeChat6ca5fa5fb2dae0e52feefdcc618145b4.png” alt=”WeChat6ca5fa5fb2dae0e52feefdcc618145b4″ style=”zoom:50%;” />
dllPlugin
提起该插件目标是为了引出后续的两个插件，dll 插件原理就是缓存，空间换工夫。然而该插件配置繁琐，所以举荐AutoDllPlugin，不过实际上 webpack4 的性能曾经足够好了，像是 vue 以及 react 都曾经移除了 dll 插件, 所以用不必还是看集体。
第二个要提及的插件是 hard-source-webpack-plugin，该插件比 dll 更具性能劣势且易于配置，然而只能由 webpack5 反对。