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反对。
发表回复