## webpack loader處理
loader ： 加載程序
loader 用于對模塊的源代碼進行轉換。loader 可以使你在 import 或"加載"模塊時預處理文件。因此，loader 類似于其他構建工具中“任務(task)”，并提供了處理前端構建步驟的強大方法。loader 可以將文件從不同的語言（如 TypeScript）轉換為 JavaScript，或將內聯圖像轉換為 data URL。loader 甚至允許你直接在 JavaScript 模塊中 import CSS文件！
### 安裝
```shell
cnpm install css-loader style-loader -S
```
### 配置
當新建文件 `*.css` 文件時進行css文件處理
webpack.config.js
```js
module:{
rules:[
{
test:/\.css$/,
use:['style-loader','css-loader']
}
]
}
```
在其中需要注意的就是 `style-loader` 在 `css-loader` 之前。
當 css 有 `background-image: url('./1.jpg')` 有圖片插入進來時，需要使用 `file-loader` 來進行處理
```js
module:{
rules:[
{
test:/\.css$/,
use:['style-loader','css-loader']
},
{
test:/\.(jpg|png|jpeg)$/,
use:['file-loader']
}
]
}
```
設置圖片保存地方及是否使用base64進行處理
```js
{
test:/\.(jpg|png|jpeg)$/,
use:'file-loader?limit=1024&name=./images/[hash:8].[name].[ext]'
}
```
### HTML的img標記處理
#### 安裝
```shell
cnpm install html-withimg-loader -S
```
#### 配置
```shell
{
test:/\.html$/,
use:["html-withimg-loader"]
}
```
### CSS 打包分離
#### 安裝
```shell
cnpm install extract-text-webpack-plugin@next -S
```
#### 配置
```js
const ExtractTextPlugin=require('extract-text-webpack-plugin');
//插件
new ExtractTextPlugin('./css/[name].css')
// rules
{
test:/\.css$/,
use:ExtractTextPlugin.extract({
fallback:"style-loader",
use:[{
loader:"css-loader",
options:{
// 壓縮
minimize:true
}
}],
// 添加公共路徑
publicPath:"../"
})
}
```
