webpack loader的作用

loader

默认webpack只支持js模块，但是webpack打造的概念是“一切皆模块”，想要实现这个概念，就需要使用loader，如果我们引入了weback不支持的模块，则会在打包时报错。

因此，我们需要安装相关的loader来解决这些问题

module.exports = {
    
    
  ...,

  module: {
    
    
    rules: [
      {
    
    
        test: /\.后缀$/,
        use: "xxx-loader",
        // 如果loader需要多个
        // 多个loader，loader的解析顺序，从后往前
        use: [
          "xxx-loader", "xxx2-loader"
        ]
      }
    ]
  }
}

test在进行文件格式的限制时需要使用正则表达式

/\.后缀名$/
/\.(png|jpg|jpeg|gif)$/

use后面跟着的对应的loader

css模块

如何让webpack识别CSS模块，我们需要安装 css-loader 和 style-loader

npm i --save-dev css-loader style-loader

# 或者

yarn add css-loader style-loader -D

• css-loader 让webpack识别css文件，并且得到里面的内容
• style-loader 获取到css-loader解析的内容，将其插入到style标签

最基本的配置

不会有人在生产环境的项目中，把css都写在js里的

module.exports = {
    
    
  module: {
    
    
    rules: [
      {
    
    
        // 限制文件类型
        /* 
          /\.后缀名$/
          /\.(png|jpg|jpeg|gif)$/
        */
        test: /\.css$/,
        // use: 'css-loader'
        use: [
          'style-loader',
          "css-loader"
        ]
      }
    ]
  }
}

将CSS单独打包

需要利用 mini-css-extract-plugin 插件

npm i --save-dev mini-css-extract-plugin

yarn add mini-css-extract-plugin

配置

const MiniCssExtractPlugin = require("mini-css-extract-plugin")

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

  plugins: [
    new MiniCssExtractPlugin()
  ]
}

sass模块

需要安装 sass-loader sass

yarn add sass-loader sass -D

如果缺少sass-loader，则会报错

如果缺少sass模块，则会报错

module.exports = {
    
    
  entry,
  output,
  module: {
    
    
    rules: [
      {
    
    
        test: /\.(sass|scss)$/,
        use: [
          // 把css插入到页面的style标签
          // "style-loader",
          // 单独将css打包
          MiniCssExtractPlugin.loader,
          "css-loader",
          "sass-loader"
        ]
      }
    ]
  }
}

资源操作

• asset/resource 发送一个单独的文件并导出 文件路径。之前通过使用 file-loader 实现。
• asset/inline 导出一个资源的 base64。之前通过使用 url-loader 实现。
• asset/source 导出资源的 文件中的源内容。之前通过使用 raw-loader 实现。
• asset 在导出一个 base64 和 文件路径 之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现。

图片资源的操作

在进行图片资源操作时v5版本不在需要 url-loader 了，现在使用 type: 'asset/resource'

module.exports = {
    
    
  output: {
    
    
    ...,
    // 如果需要将图片导报到统一的文件夹中，则使用assetModuleFileName
    assetModuleFilename: 'img/[hash][ext]'
  },
  module: {
    
    
    rules: [
      {
    
    
        test: /\.(jpg|jpeg|png|gif)$/,
        // asset 默认可以在图片小于8kb时转base64，大于8kb时输出文件路径
        type: 'asset',

        // 如果想要设置默认的8kb的大小
        parser: {
    
    
          dataUrlCondition: {
    
    
            maxSize: 16 * 1024 // 4kb
          }
        },
        // 输入文件的路径建议在对应的配置中写
        generator: {
    
    
          filename: 'img/[hash][ext][query]'
        }
      }
    ]
  }
}

字体图标的处理

module.exports = {
    
    
  output: {
    
    
    ...,
    // 如果需要将图片导报到统一的文件夹中，则使用assetModuleFileName
    assetModuleFilename: 'img/[hash][ext]'
  },
  module: {
    
    
    rules: [
      {
    
    
        test: /\.ttf$/,
        type: 'asset',
        generator: {
    
    
          filename: 'font/[hash][ext][query]'
        }
      }
    ]
  }
}