webpack入门到进阶（四) - loader介绍上篇

因为loader我想多分享几个，所以就分为上下两篇了。哈哈哈

loader

loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！

以上是loader的介绍。下面，我来介绍下，我们常接触的loader

一，css-loader 和 style-loader 

 当我们在直接在JavaScript 模块中 import CSS文件的时候，webpack会提示报错。找不到XX模块。

如在main.js里面引入。

import './css/index.css'

我们首先要安装 css-loader 和 style-loader。

 npm i css-loader style-loader -D

 安装完毕后，我们还需要在webpack.config.js配置，配置内容：

  module: {
    rules: [
      //配置css文件打包。
      //注意loader引入顺序，是从右向左引入然后解析的。
      //如：css-loader先打包css文件，然后style-loader作用是把css文件引入到html里面
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
    ]
  }

二，less-loader和sass-loader

 现在通常都会采用less或者sass这样的预处理器,能够加快开发效率。

less-loader安装配置:

import './less/base.less'

npm i less less-loader -D

配置：less-loader先处理less文件，然后交给css-loader，style-loader顺序处理。

  module: {
    rules: [
      //配置css文件打包。
      //注意loader引入顺序，是从右向左引入然后解析的。
      //如：css-loader先打包css文件，然后style-loader作用是把css文件引入到html里面
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
      { test: /\.less$/, use: ['style-loader', 'css-loader' ,'less-loader'] },
    ]
  }

sass-loader安装配置：

import './sass/base.scss'

npm i node-sass sass-loader -D

和less一样：

 { test: /\.scss$/, use: ['style-loader', 'css-loader' ,'sass-loader'] },

三，file-loader和url-loader

我们在项目中肯定需要打包一些图片资源，当然还有一些字体图标资源。这个时候我们就需要安装file-loader和url-loader了。

其中，url-loader是依赖file-loader的。

如：

body{
  div{
    color: red;
    background-image: url('../images/logo.png')
  }
}

npm i file-loader url-loader -D

{ test: /\.(png|jpeg|jpg|gif)$/, use: ['url-loader'] },

你就会看到：打包出来的图片变成了base64格式。

当然，小的图片，生成base64可以。但是我们应该清除，base64的大小，通常是图片大小的百分之20以上。所以相对大点的图片，我们就没必要转成base64了。

我们继续补充配置内容：

      {
        test: /\.(png|jpg|gif|svg)$/,
        use: [{
          loader: 'url-loader',
          options: {
            //配置的name项。指的是打包图片资源到指定的images目录下。
            //配置的limit项。指的是当图片资源大于5kb的时候，就不用转为base64格式了
            name: './images/[name].[ext]',
            limit: 5 * 1024
          }
        }],
      },

当我们执行 npm run build。

我们就可以在dist目录下看到，我们打包后的图片资源

当然，为了避免图片重名的情况，我们可以给文件名称加上哈希值。

[hash:4]指的是加上四位的hash值。你们可以随意加。

 name: './images/[name][hash:4].[ext]',

打包出来的图片名称就是：

接下来请看：

webpack入门到进阶（五）-loader介绍下篇