webpack——entry,output,plugins,loader,chunk知识
entry:打包入口
代码的入口,找到依赖模块
打包的入口,webpack去哪个文件找依赖,或是去那个文件依赖的依赖
可以是一个或者多个入口
例如:
1.module.exports={
entry:'index.js'
}
这个module.exports对象是webpack的配置,配置有一个属性就是entry,entry属性的值就是一个文件名index.js,也可以加一个路径,只要可以找到文件
2.module.exports={
entry:['index.js','vendor.js']
}
这里entry属性的值就是一个数组,这就是根据一个文件创建多个入口
3.module.exports={
entry:{
index:'index.js',
vendor:'vendor.js'
}
}
这里entry属性的值就是一个对象,这个方式相较于前两个的不同是,这里可以知道文件叫什么,可以有一个key,如果想要继续添加一个入口可以继续增加key,扩展性较好
output:输出
打包成文件,对打包文件进行描述
可以是一个或者多个
自定义规则
配合CDN
例如:
1.
module.exports={
entry:'index.js',
output:{
filename:'index.min.js'
}
}
单个输入配单个输出,filename就是输出文件名
2.
module.exports={
entry:{
index:'index.js',
vendor:'vendor.js'
},
output:{
filename:'[name].min.[hash:5].js'
}
}
[name].min.[hash:5].js这就是自定义规则了,name表示entry的name,如果entry的name是index,[name]就是index,[hash:5]是webpack打包过程中的独一无二的标识码
loaders:出来js之外的东西
处理文件
转化为模块:把文件转化为js可以认识模块
例如:
module.exports={
module:{
rules:[
{
test:/\.css$/,
user:'css-loader'
}
]
}
}
可以看到这里有一个对module.exports等于一个对象,然后对module的一个定义,一个rules数组,数组是对不同文件的定义,test:/\.css$/,是对后缀为.css的文件的定义,user是使用css-loader文件
常用loader:
编译相关:babel-loader、ts-loader
样式相关:
style-loader、css-loader、less-loader、postcss-loader
文件相关:
file-loader、url-loader
plugins:其他功能插件
参与打包整个过程
打包优化和压缩
配置编译时的变量
极其灵活
例如
const webpack=require('webpack');
module.exports={
plugins:[
new webpack.optimize.UglifyJsPlugin()
]
}
plugins下的数组是对plugins的使用
常用plugins
优化相关:CommonsChunkPlugin UglifyjsWebpackPlugin
功能相关:ExtractTextWebpackPlugin HtmlWebpackPlugin HotModuleReplacementPlugin CopyWebpackPlugin
Chunk:代码块
bundle:已经被打包过后的
Module:模块