> For the complete documentation index, see [llms.txt](https://azr.gitbook.io/webpack/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://azr.gitbook.io/webpack/zhun-bei-kai-shi/guan-li-zi-yuan.md).

# 配置loader

### 加载CSS

为了从 JavaScript 模块中 `import` 一个 CSS 文件，你需要在 [`module` 配置中](https://webpack.docschina.org/configuration/module) 安装并添加 [style-loader](https://webpack.docschina.org/loaders/style-loader) 和 [css-loader](https://webpack.docschina.org/loaders/css-loader)：

#### 安装

```javascript
$ npm i style-loader css-loader -D
```

**webpack.config.js**

```javascript
module.exports = {
  // ......
   module: {
     rules: [
       {
         test: /\.css$/,
         use: ['style-loader', 'css-loader']
       }
     ]
   }
 };
```

更改样式，进行测试。（之前进行过演示，此处不再进行演示。）

### 配置autoprefixer

`autoprefixer`是一个后处理程序，你可以同Sass，Stylus或LESS等预处理器共通使用。它适用于普通的CSS，而你无需关心要为哪些浏览器加前缀，只需全新关注于实现，并使用W3C最新的规范。

#### 安装

```javascript
$ npm i postcss-loader autoprefixer postcss -D
```

**webpack.config.js**

```javascript
module.exports = {
  // ......
   module: {
     rules: [
       		  {
                test:/\.css$/,
                use:[
                  'style-loader',
                  {
                    loader:'css-loader',
                    options:{importLoaders:1}
                    },
                  // importLoaders代表import进来的资源；
                  // 2代表css-loader后还需要使用几个loader
                  {
                    loader: 'postcss-loader',
                    options:{
                      plugins:[
                        require("autoprefixer")("last 100 versions")
                      ]
                    }
                  }
                ],
                exclude:path.resolve(__dirname,'/node_modules'),
                include:path.resolve(__dirname,'src')
              }
            ]
           }
  };
```

**写`postcss`的配置文件 `postcss.config.js`,引入`autoprefixer`**

```javascript
module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}
```

#### 测试

兼容性CSS，在页面进行验证。

```css
box {display: flex;}
```

### 加载less

#### 安装

```
$ npm i extract-text-webpack-plugin  -D
```

使用 ExtractTextPlugin 将样式表抽离成专门的单独文件。

```javascript
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  // ......
    module: {
          rules: [
              {
                  test: /\.less$/,
                  use: env == "dev" ?["style-loader","css-loader?minimize","postcss-loader","less-loader"]:ExtractTextPlugin.extract({
                                          use: ["css-loader?minimize","postcss-loader","less-loader"]})
              },
          ]
      }
};
```

### 加载图片

使用 `file-loader`，就可以轻易的加载图像。

####  安装

```javascript
$ npm i file-loader -D
```

**webpack.config.js**

```javascript
{
  // ......
module.exports = {
  // ......
   module: {
     rules: [
       {
          test: /\.(jpg|png|jpeg|bmp|gif)$/,
          use: [
            'file-loader'
          ]
       },
       }
     ]
   }
 };
```

#### 测试

在CSS文件添加img测试：

```css
box {
    background: url('./01.png');
}
```

#### 编译控制台显示

```
ash: fe69071b6b03a87929f8
Version: webpack 4.26.1
Time: 2025ms
Built at: 2018-11-29 15:00:01
                                                      Asset      Size  Chunks             Chunk Names
./dist/assets/images/01.png64904cee6c00ad23e4b2bc82bcb500f1  72.1 KiB          [emitted]
                                                  bundle.js  25.7 KiB    main  [emitted]  main
Entrypoint main = bundle.js
[./01.png] 105 bytes {main} [built]
[./entry.js] 123 bytes {main} [built]
[./module.js] 34 bytes {main} [built]
[./node_modules/css-loader/index.js?!./node_modules/postcss-loader/src/index.js!./style.css] ./node_modules/css-loader??ref--4-1!./node_modules/postcss-loader/src!./style.css 812 bytes {main} [built]
[./style.css] 1.2 KiB {main} [built]
    + 4 hidden modules
```

看到`./dist/assets/images/01.png64904cee6c00ad23e4b2bc82bcb500f1`  就是webpack找到我们的图片，并且已经处理完毕。

### 加载字体

`file-loader` 和 `url-loader` 可以接收并加载任何文件，将其输出到构建目录。

####  安装

```javascript
$ npm i url-loader -D
```

**webpack.config.js**

```javascript
{
  // ......
module.exports = {
  // ......
   module: {
     rules: [
     { 
         test: /\.(ttf|woff|woff2|eot|svg)$/,
         use: [
            'file-loader'
          ]
      }
      }
     ]
   }
 };
```

#### 测试

添加`my-font.woff`和`my-font.woff2`文件，来进行测试。

### 加载ES6

现在我们使用JS，使用ES6语法比较多，`webpack`中使用`babel-loader`

#### 安装

```
$ npm i babel-loader -D
```

**webpack.config.js**

```javascript
{
  // ......
module.exports = {
  // ......
   module: {
     rules: [
              {
                test: /\.js$/,
                use: [{
                    loader: "babel-loader"
                }],
                exclude: [/node_modules/]//把node_modules中的文件过滤掉
           }
       }
     ]
   }
 };
```

配置`babel`新建`.babelrc`

```
{
  "presets": [
    ["env", { "modules": false }],
    "react",
    "stage-0"
  ],
  "plugins": [
    ["import", { "libraryName": "antd", "style": "css" }]
  ]
}
```