webpack 3+
配置选项
entry
写法
字符形式 entry: './path/to/my/entry/file.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.filename
决定每个导出包的名字
和output.path共同决定导出包
的位置
保证唯的四种式
filename: "[name].bundle.js" 结合名使
filename: "[id].bundle.js" 使内置的chunk id
filename: "[name].
[hash].bundle.js"
使唯hash [hash:16]可指定hash度
filename:
"[chunkhash].bundle.js"
使基于内容的hash
在这依旧可以添加径 "js/[name]/bundle.js"
本法影响chunkfile
output.chunkFilename
设置件的名字
运时成 需要添加id
output.path
输出的径为绝对径
output.publicPath
常有，使当容报错
觉得是相对径还是绝对径
The![name],![id],![hash]!and![chu
nkhash]都可以使
其它设置
output.chunkLoadTimeout 块请求到期时间，默认2分钟
output.pathinfo
在打包件后，在其中所包含
引模块的信息
开发环境常有
成环境要使
output.sourcePrefix
改变输出的每的前缀
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
rt
output.auxiliaryComment
devtool
output.devtoolFallbackModuleFilenam
eTemplate
output.devtoolModuleFilenameTe
mplate
热新
output.hotUpdateChunkFilen
ame
定义热新模块名
此处允许使的占位符只有[id]
和[hash]
output.hotUpdateFunction
target为web时可
个于异步加载热新模块
的JSONP函数
output.hotUpdateMainFilena
me
定义主新模块名
此处允许使的占位符只有
[hash]
output.jsonpFunction
target为web时可
使JSONP加载所需要的
chunk
output.crossOriginLoading
当target为web时才需要使
是否允许跨域加载chunk
false 默认值，允许
anonymous 需要证书就允许
use-credentials 有证书后允许
output.umdNamedDefine
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!表达式的推断上下
DefinePlugin 允许在编译时配置的全局变
DllPlugin
为减少构建时间进分离打
包
EnvironmentPlugin
DefinePlugin!中!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的版本
ZopfliWebpackPlugin
通过 node-zopfli 将资源预先压
缩
Resolve
功能说明
决定模块如何被解析的配置参
数
帮助找到模块的绝对径
法
resolve.alians
使得引加简单
添加$符号能让表明种精确地
址
resolve.aliasFields 声明领域，如browser
resolve.cacheWithContext
resolve.descriptionFiles
指明描述件
默认为package.json
resolve.enforceExtension
如果值为true，将允许带后
缀
resolve.enforceModuleExtensio
n
对于模块是否允许使展名
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.filename
在惰性模式中，此选项可减少
编译
使!filename，可以只在某个
件被请求时编译。
devServer.headers
在所有响应中添加部内容
devServer.historyApiFallbac
k
当使!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 file.
devServer.pfxPassphrase
The passphrase to a SSL PFX
file.
devServer.port
指定要监听请求的端号：
devServer.proxy
代某些 URL
devServer.public
devServer.publicPath
此径下的打包件可在浏览
中访问。
devServer.quiet
启!quiet!后，除初始启动信
息之外的任何内容都会被打
印到控制台
devServer.setup
devServer.socket
devServer.staticOptions
devServer.stats
devServer.useLocalIp
devServer.watchContentBas
e
devServer.watchOptions
context
devtool
此选项控制是否成，以及如
何成 source map。
devtool
构建
重构建
产环境
特性
eval
+++
+++
no
成后的代码
cheap-eval-source-map
+
++
no
转换过的代码（仅限）
cheap-source-map
+
o
yes
转换过的代码（仅限）
cheap-module-eval-source-map
o
++
no
原始源码（仅限）
cheap-module-source-map
o
-
yes
原始源码（仅限）
eval-source-map
--
+
no
原始源码
source-map
--
--
yes
原始源码
inline-source-map
--
--
no
原始源码
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.__filename
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