一、资源处理流程
(1)指定一个或多个入口(entry),也就是告诉webpack具体从源码目录下的哪个文件开始打包。
(2)存在依赖关系的模块会在打包时被封装为一个chunk(代码块,在webpack中可以被理解成被抽象和包装过后的一些模块)
(3)根据具体配置不同,一个工程打包时可能会产生一个或多个chunk。
(4)webpack会从入口文件开始检索,并将具有依赖关系的模块生成一颗依赖树,最终得到一个chunk。由整个chunk得到的打包产物我们一般称之为bundle。
(5)每一个入口都会产生一个结果资源。(entry和bundle存在着对应关系)(存在特殊情况)
(6)在webpack默认配置中,当一个bundle大于250KB时(压缩前)会认为这个bundle已经过大了,在打包时会发生警告。
二、配置资源入口
Webpack通过context和entry这两个配置项来共同决定入口文件的路径。在配置入口时,实际上做了两件事:
- 确定入口模块的位置。
- 定义chunk name。(一个入口,默认为“main”,多个入口,需要为每个入口定义chunk name作为该chunk的唯一标识)
module.exports = {
context:path.join(_dirname,'./src'),
entry:'./scripts/index.js'
}
-
context
context可以理解为资源入口的路径前缀,在配置时要求必须使用绝对路径的形式。 (只能为字符串)
-
entry
(1)字符串类型
(2)数组类型入口
作用:将多个资源预先合并,在打包时webpack会将数组中最后一个元素作为实际的入口路径
module.exports = {
entry: ['babel-polyfill', './src/index.js']
}
//等同于
module.exports = {
entry: './src/index.js'
}
//index.js
import 'babel-polyfill'
(3)对象类型入口
定义多入口,必须使用对象的形式。对象的属性名(key)是chunk name,属性值(value)是入口路径(可以为字符串或数组)。
module.exports = {
entry: {
index: './src/index.js',
lib:'./src/lib.js'
}
}
(4)函数类型入口
1、用函数类型定义入口时,只要返回上面介绍的任何配置形式即可。
2、优点:可以在函数体内添加一些动态的逻辑来获取工程的入口。
3、支持返回一个promise对象来进行异步操作。
module.exports = {
entry: () => './src/index.js'
}
-
提取vendor
module.exports = {
context: path.join(_dirname, './src'),
entry: {
app:'./src/app.js',
vendor:['react','react-dom','react-router']
}
}
(1)vendor的意思是“供应商”,在webpack中vendor一般指的是工程所使用的库,框架等第三方集中打包而产生的bundle。
(2)使用CommonsChunkPlugins(webpack4后为optimaization.splitChunks),将app与wendor这两个chunk中公共模块提取出来。
(3)由于vendor仅仅只包含第三方模块,这部分不会经常改动,因此可以有效地利用客户端缓存,在用户后续请求页面时会加快整体的渲染速度。
三、配置资源出口
module.exports = {
entry: './src/app.js',
output: {
filename: 'bundle.js',
path: path.join(_dirname, './assets'),
publicPath: '/dist'
}
}
-
filename
(1)作用:控制输出资源的文件名。其形式为字符串。
(2) 可以是一个相对路径,即便路径中的目录不存在也没关系,webpack会在输出资源时创建该目录。
(3)在多入口时,需要为对应产生的每个bundle指定不同的名字,webpack支持使用一种类似模板语言的形式动态地生成文件名。
module.exports = {
entry: {
app: './src/app.js',
vendor: ['react', 'react-dom', 'react-router']
},
output: {
filename: '[name].js',
}
}
a、【name】会被替换为chunk name。
b、其他集中模板变量
【hash】:指代webpack此次打包所有资源生成的hash
【chunkhash】:指代当前chunk内容的hash。
【id】:指代当前chunk的id
【query】:指代filename配置项中的query
作用:
(1)当有多个chunk存在时对不同的chunk进行区分。
(2) 控制客户端缓存。
module.exports = {
output: {
filename: '[name]@[chunkhash].js',
}
}
-
path
path可以指定资源输出的位置,要求值必须为绝对路径
module.exports = {
entry: './src/app.js',
output: {
filename: 'bundle.js',
path: path.join(_dirname, './dist'),
}
}
-
publicPath
(1)作用:指定资源的请求位置。
(2)请求位置:由JS或CSS所请求的间接资源路径。(页面中的资源分为两种,一种是由HTML页面直接请求的,比如通过script标签加载的JS,另一种是由JS或CSS请求的,如异步加载的JS,从CSS请求的图片字体等)
(3)有3中形式
1、HTML相关:将publicPath指定为HTML的相对路径,以当前页面HTML所在路径加上相对路径,构成实际请求的URL
2、Host相关:若publicPath以‘/’开始,则代表此时publicPath是以当前页面的host name为基础路径。
3、CDN相关:使用绝对路径。
//HTML:https://example.com/app/index.html
//https://example.com/app/0.chunk.js
publicPath: './js'
//https://example.com/0.chunk.js
publicPath: '/js'
//http://cdn.com/0.chunk.js
publicPath: 'http://cdn.com'