Webpack - loader

Loader

处理顺序从下往上

css-loader

使用方式

1. 内联方式

import "css-loader!../css/index.css"
// 直接在引入时使用，使用！分开

2. CLI方式(Webpack5中不再使用)

// package.json
"scripts":{
	"build": "webpack --module-bind 'css=style-loader'!css-loader'"
}

3. 配置方式

// webpack.config.js
module: {
	// 规则使用正则表达式定义规则
	// 
	rules:[
		{
			test: /\.css$/, // 匹配规则
			use:[
				{ loader: "css-loader", options: {} }
				// 简写 => 传入字符串
				// "css-loader"
			],
			// 只使用一个loader, 不使用use  => 简写
			// loader: "css-loader"
		}
	]
}

less-loader

// webpack.config.js
module: {
	// 规则使用正则表达式定义规则
	// 
	rules:[
		{
			test: /\.less$/, // 匹配规则
			use:[
				"style-loader"
				"css-loader",
				"less-loader"
			]
		}
	]
}

多次加载

// webpack.config.js
module: {
	rules:[
		{
			test: /\.css$/,
			use:[
				"style-loader",
				{
					loader: "css-loader",
					options: {
						importLoaders: 1 // 调用前面的loader次数
					}
				}
			]
		}
	]
}

静态资源

图片

file-loader

• 处理通过import / require 引入的文件
• 将图片重命名并放在打包目录下

img.src = require('./image/01.jpg')
// 或
import img01 from './image/01.jpg'
img.src = img01 

自定义名称

// package.json
{
	test: /\/(png|je?pg)$/,
	use:[
		{
			loader: file-loader,
			options: {
				name: "img/[name].[hash:6].[ext]"
				// placeholder
				// [ext] [name] [hash] [contentHash]
				// [hash<length>]
			}
		}
	]
}

url-loader

• 类似于 file-loader
• 可以将较小的文件转为base64

// package.json
{
	test: /\/(png|je?pg)$/,
	use:[
		{
			loader: url-loader,
			options: {
				name: "img/[name].[hash:6].[ext]",
				limit: 100 * 1024 // 单位 Bit
			}
		}
	]
}

文本

raw-loader

file-loader

webpack5

asset module type

• webpack5之前需要 loader加载指定资源
• webpack5 开始，可以使用资源模块类型代替loader

• asset/resource
  file-loader
• asset/inline
  url-loader
• asset/source
  row-loader
• asset
  自动选择是否转换 base64

asset/resource

// package.json

// asset/resource类型 -- file-loader的效果
{
	test: /\/(png|je?pg)$/,
	type: "asset/resource",
	generator : { //设置输出路径
		filename:"img/[name].[hash:6][ext]"
	}
}

// 设置输出路径和名称
// 最外层
output: {
	assetModuleFileName: "img/[name].[hash:6][ext]"  // 静态文件都使用
}

asset/inline

// package.json

// asset/inline类型 -- url-loader的效果
{
	test: /\/(png|je?pg)$/,
	type: "asset/inline"
}

asset

// package.json

// asset类型 -- url-loader的效果
// 限制文件大小，打包为文件或dataUrl
{
	test: /\/(png|je?pg)$/,
	type: "asset",
	generator : { //设置输出路径
		filename:"img/[name].[hash:6][ext]"
	},
	parser: {
		dataUrlCondation: {
			maxSize: 100*1024
		}
	}
}

asset/resource

字体文件

{
   test: /\.ttf|eot|woff2?$/i,
   type: "asset/resource",
   generator: {
     filename: "font/[name].[hash:6][ext]"
   }
}

示例

const path = require('path');

module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    // 必须是一个绝对路径
    path: path.resolve(__dirname, "./build"),
    // assetModuleFilename: "img/[name].[hash:6][ext]"
  },
  module: {
    rules: [
      {
        // 规则使用正则表达式
        test: /\.css$/, // 匹配资源
        use: [
          // { loader: "css-loader" },
          // 注意: 编写顺序(从下往上, 从右往做, 从后往前)
          "style-loader", 
          {
            loader: "css-loader",
            options: {
              importLoaders: 1
            }
          },
          "postcss-loader"
        ],
        // loader: "css-loader"
      },
      {
        test: /\.less$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              importLoaders: 2
            }
          },
          "postcss-loader",
          "less-loader"
        ]
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        // type: "asset/resource", file-loader的效果
        // type: "asset/inline", url-loader
        type: "asset",
        generator: {
          filename: "img/[name].[hash:6][ext]"
        },
        parser: {
          dataUrlCondition: {
            maxSize: 100 * 1024
          }
        }
      },
      {
        test: /\.ttf|eot|woff2?$/i,
        type: "asset/resource",
        generator: {
          filename: "font/[name].[hash:6][ext]"
        }
      }
    ]
  }
}