webpack——entry，output/

Posted 2021-02-14 ellenxx

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