## 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 -->模塊
