webpack 思维导图

webpack

需积分: 15 30 浏览量更新于2023-05-23 收藏 159KB PDF 举报

webpack 思维导图 webpack 思维导图 webpack 思维导图

webpack 3+

配置选项

entry

写法

字符形式 entry: './path/to/my/entry/ﬁle.js'

对象形式

entry: {

app: './src/app.js',

vendors: './src/vendors.js'

}

引󰉁的是本地第三库

entry: {

app: './src/app.js',

vendors: [‘react’,’react-dom’]

}

引的是第三的库

作󰉁

分隔你的代码和依赖主模块：

如React

有于缓存，提󰷼使󰉁效率

entry: {

app: './src/app.js',

vendors: './src/vendors.js'

}

构建多󰵎应󰉁

entry: {

pageOne: './src/pageOne/

index.js',

pageTwo: './src/pageTwo/

index.js',

pageThree: './src/pageThree/

index.js'

}

每󰵎都有󰙵的依赖图表

output:出

作󰉁：告知webpack如何处󰇹打

包后的件

选项

output.auxiliaryComment 添加评论

基本选项

output.ﬁlename

决定每个导出包的名字

和output.path共同决定导出包

的位置

保证唯的四种式

ﬁlename: "[name].bundle.js" 结合名使󰉁

ﬁlename: "[id].bundle.js" 使󰉁内置的chunk id

ﬁlename: "[name].

[hash].bundle.js"

使󰉁唯hash [hash:16]可指定hash󰲊度

ﬁlename:

"[chunkhash].bundle.js"

使󰉁基于内容的hash

在这󰮟依旧可以添加󰩁径 "js/[name]/bundle.js"

本法影响chunkﬁle

output.chunkFilename

设置件的名字

运󰢩时󰈿成需要添加id

output.path

输出的󰩁径为绝对󰩁径

output.publicPath

󰴬常有󰉁，使󰉁当容报错

觉得是相对󰩁径还是绝对󰩁径

The![name],![id],![hash]!and![chu

nkhash]都可以使󰉁

其它设置

output.chunkLoadTimeout 块请求到期时间，默认2分钟

output.pathinfo

在打包件后，在其中所包含

引󰉁模块的信息

开发环境󰴬常有󰉁

󰈿成环境要使󰉁

output.sourcePreﬁx

改变输出的每󰢩的前缀

hash

outpul.hashDigest

决定hash󰈿成的式，默认为

hex

node.js 持的模式都被持

output.hashSalt

hash.update

output.hashFunction

持的hash算法

crypto.createHash

output.hashDigestLength

hash值的预设󰲊度

library

output.library

output.libraryTarget

output.libraryExpo

output.auxiliaryComment

devtool

output.devtoolFallbackModuleFilenam

eTemplate

output.devtoolModuleFilenameTe

mplate

热新

output.hotUpdateChunkFilen

ame

󰙵定义热新模块名

此处允许使󰉁的占位符只有[id]

和[hash]

output.hotUpdateFunction

target为web时可󰉁

个󰉁于异步加载热新模块

的JSONP函数

output.hotUpdateMainFilena

󰙵定义主新模块名

此处允许使󰉁的占位符只有

[hash]

output.jsonpFunction

target为web时可󰉁

使󰉁JSONP加载所需要的

chunk

output.crossOriginLoading

当target为web时才需要使󰉁

是否允许跨域加载chunk

false 默认值，允许

anonymous 需要证书就允许

use-credentials 有证书后允许

output.umdNamedDeﬁne

output.strictModuleExceptionHan

dling

从模块实中移除某模块

module

module.rules

匹配请求的规则数组

单个rule

󰉁以指定匹配规则并󰉁对应的

loader处󰇹

具体分三部分

条件

resource

这些属决可󰉁

rule.test

rule.include

rule.exclude

rule.resource

rule.oneOf 只使󰉁第个匹配条件

issuer issuer

结果

应󰉁的loader

rule.enforce

指定loader种类

可能的值

pre

post

rule.loader

rule.options

rule.query

rule.use

rule.use.loader

rule.use.options

rule.use.query

Parse选项 rule.parse

嵌套的Rule

loaders:加载

webpack本身只󰇹解JavaScript

作󰉁

`test`判断对应件应该被那个特定的

loader转换

use：转换件格式并添加到依

赖图中

三种使󰉁法

配置件 module.rules中

Inline

import Styles from 'style-loader!

css-loader?modules!./

styles.css';

模块和资源之间使󰉁!号分隔

模块使󰉁相对当前󰩁径的位置

选项的添加有两种式

查询参数 ?key=value&foo=bar

JSON对象 ?{"key":"value","foo":"bar"}

CLI

webpack --module-bind jade-loader --module-bind

'css=style-loader!css-loader'

特征

链式调󰉁

前个的处󰇹结果会传递给后

个

可同步和异步执󰢩

Loaders在Node,js中加载，因此

可以执󰢩任何node中可执󰢩的

代码

Loaders可接收查询参数，可󰉁

于loaders的配置

Loaders还可以通过`options`对

象配置

插件能丰富loaders的功能

Loaders能产󰈿额外的任意件

常󰉁loaders

module.noParse

值是个正则表达式

解析和该表达式相匹配的值

模块上下

plugins:模块

往往是对打包后的结果进󰢩操

作

使󰉁

调󰉁并添加到`plugins`数组中

多数插件可通过`options`对象

配置

调󰉁时需要使󰉁new创建新实

定位

webpack的backbone

切loader能做的事情都由

plugins做

个具有apply属性的js对象

常󰉁Plugins

AggressiveSplittingPlugin

将原来的 chunk 分成的

chunk

BabiliWebpackPlugin 基于Babili的裁剪具

BannerPlugin

在每个󰈿成的 chunk 顶部添加

banner

CommonsChunkPlugin

提取 chunks 之间共享的通󰉁模

块

ComponentWebpackPlugin 通过webpack加载组件

CompressionWebpackPlugin

预先准备的资源压缩版本，使

󰉁 Content-Encoding 提供访问

服务

ContextReplacementPlugin

重写!require!表达式的推断上下



DeﬁnePlugin 允许在编译时配置的全局变󰮢

DllPlugin

为减少构建时间进󰢩分离打

包

EnvironmentPlugin

DeﬁnePlugin!中!process.env!键

的简写式

ExtractTextWebpackPlugin

从bundle中提出css到单独的

件中

HotModuleReplacementPlugin 启󰉁热替换

HtmlWebpackPlugin

󰙵动依旧打包结果󰈿成html

件

I18nWebpackPlugin 为 bundle 增加国际化持

IgnorePlugin 从bundle中排除某些包

LimitChunkCountPlugin

设置 chunk 的最/最限制，

以微调和控制 chunk

LoaderOptionsPlugin

󰉁于从 webpack 1 迁移到

webpack 2

MinChunkSizePlugin

通过合并于!minChunkSize!

的 chunk，将 chunk 体积保

持在指定限制以上

NoEmitOnErrorsPlugin

在输出阶段时，遇到编译错误

跳过

NormalModuleReplacementPlu

gin

替换与正则表达式匹配的资源

NpmInstallWebpackPlugin 开发时󰙵动安装缺少的依赖

ProvidePlugin

必通过 import/require 使󰉁模

块

SourceMapDevToolPlugin

对sourcemap进󰢩细粒度的

控制

UglifyjsWebpackPlugin 󰉁于控制项󰋴中Uglify的版本

ZopﬂiWebpackPlugin

通过 node-zopﬂi 将资源预先压

缩

Resolve

功能说明

决定模块如何被解析的配置参

数

帮助找到模块的绝对󰩁径

法

resolve.alians

使得引加简单

添加$符号能让表明种精确地

址

resolve.aliasFields 声明领域，如browser

resolve.cacheWithContext

resolve.descriptionFiles

指明描述件

默认为package.json

resolve.enforceExtension

如果值为true，将允许带后

缀

resolve.enforceModuleExtensio

对于模块是否允许使󰉁展名

resolve.extensions

󰙵动寻找特定的展

默认值为[“.js”,”.json”]

resolve.mainFields

确定对package.json描述的主

件的解析顺序

resolve.mainFiles

解析󰋴录寻找件时匹配的顺

序，默认为“index”

resolve.modules

告知webpack在解析模块时可以在

那些󰩁径中寻找

默认值为[‘node_modules’]

可以在之前添加其它󰩁径

modules:

[path.resolve(__dirname, "src"),

"node_modules"]

resolve.unsafeCache

启󰉁快速但是是那么安全的

模块缓存机制

可以使󰉁数组或者RE来配置使

得直对特定模块配置

resolve.plugins 组额外的解析插件

resolve.symlinks

是否解析符号链接到其链接位

置

resolve.cachePredicate

devServer

为应󰉁提供本地服务 基本使󰉁

devServer: {

contentBase:

path.join(__dirname, "dist"),

compress: true,

port: 9000

}

属性

devServer.allowedHosts

添加本地服务可访问的域名

󰋏名单

devServer.bonjour

This option broadcasts the

server via ZeroConf networking

on start

devServer.clientLogLevel 控制在控制台显示的消息

devServer.compress

设置为true,所有服务都将启󰉁

gzip压缩

devServer.contentBase 告诉服务从那󰮟提供内容

默认为当前󰋴录

可󰙵定义contentBase:

path.join(doorman, "public")

可设置为多个󰋴录：

contentBase:

[path.join(__dirname, "public"),

path.join(__dirname, "assets")]

devServer.disableHostCheck

devServer.ﬁlename

在惰性模式中，此选项可减少

编译

使󰉁!ﬁlename，可以只在某个

件被请求时编译。

devServer.headers

在所有响应中添加󰶳部内容

devServer.historyApiFallbac

当使󰉁!HTML5 History API!时，

任意的!404!响应都可能需要被

替代为!index.html

使󰉁!rewrites!这个选项，此󰢩

为可进步地控制

devServer.host

指定使󰉁个 host。默认

是!localhost

通过设置可通过外部访问

devServer.hot

启󰉁 webpack 的模块热替换特

性

devServer.hotOnly

devServer.https

https: {

key: fs.readFileSync("/path/to/

server.key"),

cert: fs.readFileSync("/path/to/

server.crt"),

ca: fs.readFileSync("/path/to/

ca.pem"),

}

启󰉁https

devServer.inline

在两种模式切换

devServer.lazy

当启󰉁!lazy!时，dev-server 只

有在请求时才编译包(bundle)

此时称为惰性模式

devServer.noInfo

设置为true会隐藏构建的些

消息

devServer.open

󰙵动打开浏览

devServer.openPage

打开浏览时跳转到对应的󰵎

󰴯

devServer.overlay

devServer.pfx

Path to a SSL pfx ﬁle.

devServer.pfxPassphrase

The passphrase to a SSL PFX

ﬁle.

devServer.port

指定要监听请求的端号：

devServer.proxy

代󰇹某些 URL

devServer.public

devServer.publicPath

此󰩁径下的打包件可在浏览

中访问。

devServer.quiet

启󰉁!quiet!后，除初始启动信

息之外的任何内容都会被打

印到控制台

devServer.setup

devServer.socket

devServer.staticOptions

devServer.stats

devServer.useLocalIp

devServer.watchContentBas

devServer.watchOptions

context

devtool

此选项控制是否󰈿成，以及如

何󰈿成 source map。

devtool

构建

重构建

󰈿产环境

特性

eval

+++

󰈿成后的代码

cheap-eval-source-map

转换过的代码（仅限󰢩）

cheap-source-map

yes

转换过的代码（仅限󰢩）

cheap-module-eval-source-map

原始源码（仅限󰢩）

cheap-module-source-map

yes

原始源码（仅限󰢩）

eval-source-map

原始源码

source-map

yes

原始源码

inline-source-map

原始源码

hidden-source-map

yes

原始源码

nosources-source-map

yes

源码内容

target

指定打包的󰋴标，针对 node 和

web 打包有所同

watch

启󰉁 Watch 模式后会监听件

的改，打包

watchOptions

组󰉁来定制 Watch 模式的选

项：

watchOptions.aggregateTim

eout

延迟打包时间，可以󰉁以把多

次改󰉁在次打包中

watchOptions.ignored

监听些件夹，提󰷼构建

性能

watchOptions.poll

指定毫秒为单位进󰢩轮询

external

字符

数组

对象

此语法󰉁于描述所有外部

library 可󰉁的访问式。

function

regex 所有匹配的模块都将排除在外

node

是个对象，其中每个属性都

是 Node.js 全局变󰮢或模块的

名称

可以是如下的值

true

“mock”

“empty”

false

有如下可配置选项

node.console

node.process

node.global

node.__ﬁlename

node.__dirname

node.Buffer

node.setImmediate

performance

作󰉁：配置如何展示性能提示

可配置属性

performance.hints

作󰉁：打开/关闭提示。

默认值："warning"

可配置值：false | "error" |

"warning"

performance.maxEntrypoint

Size

设置件到何时提醒

performance.maxAssetSize

规定单个资源到何时开始

有警告

performance.assetFilter

此选项是个函数󰉁于确定哪

些件需要有提示

stats

󰉁于控制在命令󰢩显示那些信

息

值可以是个对象也可以是

个字符

可选值

Preset

Alternative

Description

"errors-only"

none

只在发󰈿错误时输出

"minimal"

none

只在发󰈿错误或是新的编译时输出

"none"

false

没有输出

"normal"

true

标准输出

"detailed"

none

详细输出（从 webpack 3.0.0 开始）

"verbose"

none

全部输出

基础

定位

现代JS应󰉁的模块打包具

通过递归处󰇹构建你的应󰉁的

依赖󰕲

打包众多模块为少数个件

供浏览加载

使󰉁

命令󰢩

配置对象

导出个对象的JS件

在配置对象中可以做的事情

require其它件或npm包

使󰉁JS中的三元判断?:

使󰉁常󰮢和变󰮢

编写函数来󰈿成配置件的

部分

配置对象有多种写法，󰴬常值

得注意的点是要记得保持唯

性

安装推荐本地安装npm install --save-dev webpack

件管󰇹

输出管󰇹

三种类型的代码

󰙵编写的源码

第三库中的代码

webpack相关代码

runtime

在模块交互时，连接模块所需

的加载和解析逻辑。包括浏览

中的已加载模块的连接，以

及懒加载模块的执󰢩逻辑。

manifest

当编译(compiler)开始执󰢩、

解析和映射应󰉁程序时，保󰉙

的所有模块的详细要点的数据

集合

特征󰷼度可配置tree shaking

模块化

下载后可阅读完整内容，剩余0页未读，立即下载

tom1212123

粉丝: 0
资源: 3

webpack 思维导图

HTML思维导图

web前端思维导图

前端知识：前端知识脑图总结

webpack配置思维导图

webpack学习思维导图

webpack打包工具思维导图

webpack打包速度优化思维导图

web思维导图

vue 基础思维导图pdf

NEXT.JS思维导图

最新资源