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:模块

猜你喜欢

转载自www.cnblogs.com/ellen-mylife/p/10622746.html