webpack的loader

webpack的loader

###   什么是loader

 

loader是webpack中一个非常核心的概念。

 

webpack可以将js、图片、css处理打包，但是对于webpack本身是不能处理css、图片、ES6转ES5等。

 

此时就需要webpack的扩展，使用对应的loader就可以。

 

**loader使用**

 

> 步骤一：通过npm安装需要使用的loader

 

> 步骤二：通过webpack.config.js中的modules关键字下进行配置

 

大部分loader可以在webpack的官网找到对应的配置。

 

### CSS文件处理 

 

> 准备工作：复制02-webpack的配置到根目录，改名字为03-webpack的loader

 

**1.将除了入口文件（main.js）所有js文件放在js文件夹，新建一个css文件夹，新建一个normal.css文件**

 

> normal.css

 

```css

body{

  background-color: red;

}

```

 

**2.main.js导入依赖**

 

```javascript

//4.依赖css文件

require('./css/normal.css')

```

 

此时如果直接进行打包`npm run build`。

> 提示信息很清楚，打包到css文件时报错，提示我们可能需要一个loader来处理css文件。

 

**3.安装css-loader**

 

```shell

npm install --save-dev css-loader

```

 

**4.使用css-loader**

 

```javascript

module.exports = {

  module: {

    rules: [

      {

        test: /\.css$/,//正则表达式匹配css文件

        //css-loader只负责css文件加载，不负责解析，要解析需要使用style-loader

        use: [{

          loader: 'css-loader'

        }]//使用loader

      }

    ]

  }

}

```

 

> 执行`npm run build`，提示打包成功，但是背景色并没有变红色，是因为css-loader只负责加载css文件，不负责解析，如果要将样式解析到dom元素中需要使用style-loader。

 

5.安装使用style-loader

 

```shell

npm install --save-dev style-loader

```

 

```javascript

  module: {

    rules: [

      {

        test: /\.css$/,//正则表达式匹配css文件

        //css-loader只负责css文件加载，不负责解析，要解析需要使用style-loader

        use: [{

          loader: 'style-loader'

        }, {

          loader: 'css-loader'

        }]//使用loader

      }

    ]

  }

```

 

> webpack使用多个loader是从右往左解析的，所以需要将css-loader放在style-loader右边，先加载后解析。

 

此时样式成加载解析到DOM元素上。

 

less文件处理

**1.在css文件夹中新增一个less文件**

> special.less

```less

@fontSize:50px;//定义变量字体大小

@fontColor:orange;//定义变量字体颜色

body{

  font-size: @fontSize;

  color: @fontColor;

}

```

**2.main.js中导入less文件模块**

```javascript

//5.依赖less文件

require('./css/special.less')

//6.向页面写入一些内容

document.writeln("hello,zzzz!")

```

**3.安装使用less-loader**

```shell

npm install --save-dev less-loader less

```

在`webpack.config.js`中使用less-loader

```javascript

  module: {

    rules: [

      {

        test: /\.less$/,//正则表达式匹配css文件

        //css-loader只负责css文件加载，不负责解析，要解析需要使用style-loader

        use: [{

          loader: 'style-loader'

        }, {

          loader: 'css-loader'

        }, {

          loader: 'less-loader'//less文件loader

        }]//使用loader

      }

    ]

  }

```

**4.执行npm run build**

 

less文件生效了，字体是orange，大小为50px。

###  图片文件的处理

> 准备工作，准备两张图片，图片大小为一张8KB以下（实际大小为5KB，名称为small.jpg），一张大于8KB（实际大小为10KB，名称为big.jpg），新建一个img文件夹将两张图片放入。

**1.修改normal.css样式，先使用小图片作为背景**

```

body{

  /* red; */

  background: url("../img/small.jpg");

}

```

此时如果直接使用npm run build 直接打包会报错，因为css文件中引用了图片url，此时需要使用**url-loader**。

**2.安装使用url-loader处理图片**

  url-loader像 file loader 一样工作，但如果文件小于限制，可以返回 [data URL](https://tools.ietf.org/html/rfc2397) 。

```shell

npm install --save-dev url-loader

```

配置

```javascript

{

        test: /\.(png|jpg|gif)$/,//匹配png/jpg/gif格式图片

        use: [

          {

            loader: 'url-loader',

            options: {

              limit: 8192//图片小于8KB时候将图片转成base64字符串，大于8KB需要使用file-loader

            }

          }

        ]

      }

```

**3.打包**

使用npm run build打包后，打开index.html。

 

> 小于`limit`大小的图片地址被编译成base64格式的字符串。

此时修改css文件，使用big.jpg做背景。

```css

body{

  /* red; */

  /* background: url("../img/small.jpg"); */

  background: url("../img/big.jpg");

}

```

再次打包，报错，提示未找到file-loader模块。

 

> 因为大于`limit`的图片需要`file-loader`来打包。

**4.安装使用file-loader处理图片**

```shell

npm install --save-dev file-loader

```

不需要配置，因为url-loader超过limit的图片会直接使用file-loader。

再次打包，没有报错，打包成功，但是图片未显示。

 

> 1.当加载的图片大小小于limit，使用base64将图片编译成字符串

>

> 2.当加载的图片大小大于limit，使用file-loader模块直接将big.jpg直接打包到dist文件家，文件名会使用hash值防止重复。

>

> 3.此时由于文件路径不对所以导致没有加载到图片

 

**5.如何使用file-loader，指定路径**

修改output属性

```javascript

  output:{

    path: path.resolve(__dirname, 'dist'),//动态获取打包后的文件路径,path.resolve拼接路径

    filename: 'bundle.js',//打包后的文件名

    publicPath: 'dist/'

  },

```

此时打包，图片正常显示

 

> 注意：一般来说，index.html最终也会打包到dist文件夹下，所以，并不需要配置publicPath，如何打包index.html请看webpack处理.vue文件。

> file-loader打包后，使用hash值做文件名太长，此时可以使用options的一些配置。

```javascript

options: {

              limit: 8192,//图片小于8KB时候将图片转成base64字符串，大于8KB需要使用file-loader

              name: 'img/[name].[hash:8].[ext]'//img表示文件父目录，[name]表示文件名,[hash:8]表示将hash截取8位[ext]表示后缀

            }

```

> 修改options，加上name属性，其中img表示文件父目录，[name]表示文件名,[hash:8]表示将hash截取8位[ext]表示后缀

再次打包

 

###   ES6语法处理

webpack打包时候ES6语法没有打包成ES5语法，如果需要将ES6打包成ES5语法，那么就需要使用babel。直接使用babel对应的loader就可以了。

安装

```shell

npm install --save-dev babel-loader@7 babel-core babel-preset-es2015

```

配置

```javascript

      {

        test: /\.js$/,

        //排除node模块的js和bower的js

        exclude: /(node_modules|bower_components)/,

        use: {

          loader: 'babel-loader',

          options: {

            //如果要使用@babel/preset-env这里需要在根目录新建一个babel的文件

            // presets: ['@babel/preset-env']

            //这里直接使用指定

            presets: ['es2015']

          }

        }

      }

```

> 1.如果要使用@babel/preset-env这里需要在根目录新建一个babel的文件

>

> 2.exclude排除不需要打包的文件