标签：mon require tput extract 文件创建 相关 功能 spl end
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：模块
标签：mon require tput extract 文件创建 相关 功能 spl end
原文地址：https://www.cnblogs.com/ellen-mylife/p/10622746.html
