## 1.Entry
~~~
Entry 代码入口-打包入口-单个或多个
module.exports ={
entry:{
index:'index.js'
}
}
~~~
## 2.Output
~~~
//打包成的文件(bundle)
module.exports ={
entry:{
index:'index.js',
vendor:'vendor.js'
},
output:{
filename:'[name].min.[hash:5].js'
}
}
~~~
## 3.Loaders
>处理文件
转化为webpack可以认识的模块
~~~~
module.exports = {
module:{
rules:[
{
test:'/\.css$/',
use:'css-loader'
}
]
}
}
~~~~
### 常用的loader
编译相关
~~~
babel-loader ts-loader
~~~
样式相关
~~~
style-loader,css-loader,less-loader,postcss-loader
~~~
文件相关
~~~
file-loader,url-loader
~~~
## 4.Plugins
~~~
- 参与打包整个过程
- 打包优化和压缩
- 配置编译时的变量
~~~
~~~
const webpack = require('webpack');
module.exports = {
plugins:[
new webpack.optimize.UglifyJsPlugin()
]
}
~~~
常用的Plugins
优化相关
~~~
- CommonsChunkPlugin
- UglifyjsWebpackPlugin
~~~
功能相关
~~~
- ExtractTextWebpackPlugin
- HtmlWebpackPlugin
- HotModuleRepalcementPlugin
- CopyWebpackPlugin
~~~
名词解释
chunk -->代码块
Bundle-->被打包后的代码
Module -->模块
