loader | web

# loader

loader 本身仅仅只是一个函数，接收模块代码的内容，然后返回代码内容转化后的结果。

webpack不能识别非js文件，需要借助loader打包, loader不需要手动引入 ，webpack会自动去匹配寻找使用的loader，而插件则需要手动引入。

loader可以单独写在rules里，也可以用use包裹，如果是使用到多个loader，use应该为数组的形式

{
  test: /\.js$/,
  loader: "loader1",//单个loader
}


{
  test:/\.jpg$/,
  use:{
    loader:'file-loader'//可以用use包裹loader
  }
}


{
    test: /\.css$/,
    // 多个loader可以写成数组，如果有配置项，对应的loader可写成对象形式
    use: [
      'style-loader',
      {
        loader: 'css-loader',
        options: {
          modules:true,//开启css模块化打包
          importLoaders: 2, 
        },
      },
      'postcss-loader',
      'sass-loader'
    ]
}

TIP

如何可以自定义文件的输出路径和文件名呢？
- 方式1：修改output，添加assetModuleFilename属性；(asset module type模式下生效)
- 方式2.1：在Rule中，添加一个generator属性，并且设置filename；(asset module type)
- 方式2.2：对应的loader的options配置中设置outputPath或者直接在name属性上加目录

# 分类

pre：前置 loader
normal：普通 loader
inline：内联 loader
post：后置 loader
执行顺序:4 类 loader 的执行优级为：pre > normal > inline > post 。
相同优先级的 loader 执行顺序为：从右到左，从下到上。

// 此时loader执行顺序：loader3 - loader2 - loader1
module: {
  rules: [
    {
      test: /\.js$/,
      loader: "loader1",
    },
    {
      test: /\.js$/,
      loader: "loader2",
    },
    {
      test: /\.js$/,
      loader: "loader3",
    },
  ],
},

// 此时loader执行顺序：loader1 - loader2 - loader3
module: {
  rules: [
    {
      enforce: "pre",
      test: /\.js$/,
      loader: "loader1",
    },
    {
      // 没有enforce就是normal
      test: /\.js$/,
      loader: "loader2",
    },
    {
      enforce: "post",
      test: /\.js$/,
      loader: "loader3",
    },
  ],
},

rules:[
    {
        test:/\.css$/,
        loader:'css-loader'
    },
    {
        test:/\.css$/,
        loader:'style-loader',
        enforce:'post'
    }
]

# inline loader的前缀

inline loader 可以通过添加不同前缀，跳过其他类型 loader。

! 跳过 normal loader。
-! 跳过 pre 和 normal loader。
!! 跳过 pre、 normal 和 post loader。

用法：import Styles from 'style-loader!css-loader!./styles.css';

含义：
1. 使用 css-loader 和 style-loader 处理 styles.css 文件
2. 通过 ! 将资源中的 loader 分开
3. inline loader 可以通过添加不同前缀，跳过其他类型 loader
! 跳过 normal loader

import Styles from '!style-loader!css-loader!./styles.css';

-! 跳过 pre 和 normal loader

import Styles from '-!style-loader!css-loader!./styles.css';

!!跳过 pre、 normal 和 post loader

import Styles from '!!style-loader!css-loader!./styles.css';

# raw-loader

raw-loader 是一个 Webpack 的加载器（loader），它允许你将文件作为字符串导入到你的 JavaScript 或 TypeScript 代码中。这个加载器特别适用于那些你想要在 JavaScript 中以字符串形式使用的内容，比如文本文件、HTML、SVG、CSS 等。

module.exports = {  
  module: {  
    rules: [  
      {  
        test: /\.txt$/,  
        use: ['raw-loader'],  
      },  
      // ... 其他规则 ...  
    ],  
  },  
  // ... 其他配置 ...  
};

使用：在你的 JavaScript 或 TypeScript 代码中，你现在可以使用 import 语句来导入 .txt 文件了。文件的内容将被作为字符串导入，并可以直接在你的代码中使用。

import txtContent from './somefile.txt';  
  
console.log(txtContent); // 输出文件内容

# file-loader

文件加载器将文件上的import/require（）解析为url，并将文件发送到输出目录。

支持import/require 引入的路径，或者是例如background:url(xx)引入方式，但是如果是在js中用字符串的src直接写入，无效

import zzhnImage from '../img/zznh.png';
imgEl.src = zzhnImage;
//imgEl.src='../img/xxx.png' //这种写法，首先打包后找不到对应的目录，第二是文件根本就不会报打包到dist包中。

cnpm i file-loader -D

打包jpg文件

const path = require('path') 
module.exports={
	module:{
		rules:[{
			test:/\.jpg$/,
			use:{
				loader:'file-loader'
			}
		}]
	}
}

# file-loader额外配置

name
- [ext]：处理文件的扩展名； 这里不包括点
- [name]：处理文件的名称；
- [hash]：文件的内容，使用MD4的散列函数处理，生成的一个128位的hash值（32个十六进制）；
- [contentHash]：在file-loader中和[hash]结果是一致的（在webpack的一些其他地方不一样，后面会讲到）；
- [hash:<length>]：截图hash的长度，默认32个字符太长了；
- [path]：文件相对于webpack配置文件的路径；
outputPath:来设置输出的文件夹

 {
    test: /\.(eot|ttf|woff2?)$/,
    use: {
          loader: "file-loader",
          options: {
            // outputPath: "font",
             name: "font/[name]_[hash:6].[ext]"
           }
    }
},

outputPath可以设置文件夹，name中font/[name]也可以生成文件夹，如果二者都用，则outputPath的文件夹在外层，包裹着name生的文件夹

options中有些参数不仅可以写字符串，也可以写成函数形式进行处理

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        loader: 'file-loader',
        options: {
          name(resourcePath, resourceQuery) {
            // `resourcePath` - `/absolute/path/to/file.js`
            // `resourceQuery` - `?foo=bar`

            if (process.env.NODE_ENV === 'development') {
              return '[path][name].[ext]';
            }
            return '[contenthash].[ext]';
          },
        },
      },
    ],
  },
};

# url-loader

url-loader功能包含file-loader的基本功能，同时有一个options属性limit来限制大小，如果文件小于limit则会直接以base64打包到js里，如果大于则会生成新文件。
配置的文件夹可以单独设置outputPath，也可以在name上体现name:'img/[name].[ext]'
outputPath:'img/',中的img/可以直接写成img

cnpm i url-loader --save-dev

const path = require('path') 
module.exports={
	mode:'production',
	entry:'./index.js',
	module:{
		rules:[{
			test:/\.(jpg|gif|png)$/,
			use:{
				loader:'url-loader',
				options:{
					name:'[name].[ext]',
					outputPath:'img/',
					limit:2048
				}
			}
		}]
	},
	output:{
		filename:'bundle.js',
		path:path.resolve(__dirname,'zip')
	}
}

# asset module type

在webpack5之前，加载这些资源需要使用一些loader，比如raw-loader 、url-loader、file-loader；
在webpack5中，可以直接使用资源模块类型（asset module type），来替代上面的这些loader；

资源模块类型(asset module type)，通过添加 4 种新的模块类型，来替换所有这些 loader：

asset/resource 发送一个单独的文件并导出 URL。相当于file-loader
asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现；
asset/source 导出资源的源代码。之前通过使用 raw-loader 实现；
asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。相当于url-loader, 将文件转化成 Webpack 能识别的资源，同时小于某个大小的资源会处理成 data URI 形式

如果没有配置文件夹，又需要的话可以在output中进行配置assetModuleFilename

module.exports={
	output: {
		assetModuleFilename: "imgs/[name]_[hash:6][ext]"
	},
	module:{
		rules:[
			 {
          test: /\.(jpe?g|png|gif|svg)$/,
          type: "asset",
          generator: {
            filename: "img/[name]_[hash:6][ext]"
          },
           parser: {
            dataUrlCondition: {
            maxSize: 100 * 1024
          }
        }
      }
		]
	}
}

TIP

转base64优缺点

优点：减少请求数量
缺点：体积变得更大(小图片还好，大图片可能体积变得大1/3左右)

开发中可能还存在一些其他资源，如音视频等，也可以使用asset一起处理了

const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
    clean: true, // 自动将上次打包目录资源清空
  },
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
          },
        },
        generator: {
          // 将图片文件输出到 static/imgs 目录中
          // 将图片文件命名 [hash:8][ext][query]
          // [hash:8]: hash值取8位
          // [ext]: 使用之前的文件扩展名
          // [query]: 添加之前的query参数
          filename: "static/imgs/[hash:8][ext][query]",
        },
      },
      {
        test: /\.(ttf|woff2?|mp4|mp3|avi)$/,
        type: "asset/resource",
        generator: {
          filename: "static/media/[hash:8][ext][query]",
        },
      },
    ],
  },
  mode: "development",
};

# css文件loader

使用scss需要配置

npm install sass-loader node-sass --save-dev

npm install style-loader css-loader  --save-dev

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

借助webpack的~前缀,* css loader 会把非根路径的url解析为相对路径，加~前缀才解析为模块路径。

background: url('~@/assets/image/background.png');

<style lang="scss">
    @import '~@/assets/style/index'
</style>

vite中可以不需要加~

# css前缀补充postcss

PostCSS是一个通过JavaScript来转换样式的工具；这个工具可以帮助我们进行一些CSS的转换和适配，比如自动添加浏览器前缀、css样式的重置；

cnpm install postcss postcss-cli -D

postcss-cli在命令行操作的时候需要，如果是在工程中可以省略

因为需要添加前缀，所以要安装autoprefixer：

cnpm install autoprefixer -D

直接使用使用postcss工具，并且制定使用autoprefixer

npx postcss --use autoprefixer -o end.css ./src/css/style.css

// --use 插件 -o 输出文件名 输入文件名

真实开发中必然不会直接使用命令行工具来对css进行处理，而是可以借助于构建工具：在webpack中使用postcss就是使用postcss-loader来处理的；

cnpm install postcss-loader -D

注意：因为postcss需要有对应的插件才会起效果，所以我们需要配置它的plugin；

当然，也可以将这些配置信息放到一个单独的文件中进行管理：在根目录下创建postcss.config.js,webpack会自动先去读取rules，发现规则中没有postcss的plugins，就会查看根目录下是否有postcss.config.js。

//webpack.config.js
const path = require('path') 
module.exports={
	mode:'production',
	entry:'./index.js',
	module:{
		{
			test:/\.scss$/,
			use: [
				{loader:'style-loader'},
				{loader:'css-loader',
				options:{
					 modules:true,
					importLoaders:1	   
					}
				},
				{loader:'postcss-loader'}
				{loader:'sass-loader'},
			  ]
	

		}
		]
	},
	output:{
		filename:'bundle.js',
		path:path.resolve(__dirname,'zip')
	}
}

//postcss.config.js
module.exports = {
    plugins: [
        require('autoprefixer')({
            "browsers": [
                "defaults",
                "not ie < 11",
                "last 2 versions",
                "> 1%",
                "iOS 7",
                "last 3 iOS versions"
            ]
        })
    ]
};

# postcss-preset-env

事实上，在配置postcss-loader时，配置插件并不需要使用autoprefixer。可以使用另外一个插件：postcss-preset-env,更为强大和优势

postcss-preset-env也是一个postcss的插件；它可以帮助我们将一些现代的CSS特性，转成大多数浏览器认识的CSS，并且会根据目标浏览器或者运行时环境添加所需的polyfill；也包括会自动帮助我们添加autoprefixer（所以相当于已经内置了autoprefixer）；

npm install postcss-preset-env -D

可以在webpack中配置

module: {
		rules: [{
			test: /\.(css|less)$/,
			use: ['style-loader', 'css-loader', {
				loader: 'postcss-loader',
				options: {
					postcssOptions: {
						plugins: [
							require("postcss-preset-env")(),
						]
					}
				}
			}, {
				loader: 'less-loader'
			}]
		}]
	},

在单独文件postcss.config.js配置

module.exports = {
    plugins: [
        'postcss-preset-env'
    ]
};

还可以在package.json中配置

"browserslist": [
    "defaults",
    "not ie < 11",
    "last 3 versions",
    "> 0.2%",
    "iOS 7",
    "last 3 iOS versions"
]

# vue-style-loader

vue-style-loader 跟 style-loader 基本用法跟功能是一样的，都是往 dom 里面插入一个 style 标签去让样式生效的，但是 vue-style-loader 支持 vue 中的 ssr（服务端渲染），所以如果需要支持服务端渲染的 vue 项目，就需要用到 vue-style-loader了，如果一般的 vue 项目的话，推荐使用 style-loader，毕竟 style-loader 支持的功能还是丰富些，比如可以懒注入、可以指定位置插入标签等等。

# css-loader

查询参数 importLoaders，用于配置「css-loader 作用于 @import 的资源之前」有多少个 loader。

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
			  modules:true,//开启css模块化打包
              importLoaders: 2, 
			  // 0 => no loaders (default); 1 => postcss-loader; 2 => postcss-loader, sass-loader
            },
          },
          'postcss-loader',
          'sass-loader',
        ],
      },
    ],
  },
};

# importLoaders 配置

当遇到 @import 语法，CSS modules and ICSS imports 时，默认会用 css-loader 处理，在 css-loader 前执行的 loader 就不会再回头执行了，如果配置了 importLoaders number类型，例如配置了 n，就会用 css-loader 前的 n 个 loader 去处理，然后再用 css-loader 处理。

{  
	test: /\.css$/,  
	use: [  
	  'style-loader',  
	  {
		loader:'css-loader',
		options:{
		  importLoaders: 1, 
		}
	  },
	  'postcss-loader'
	],  
  },

如果不配置importLoaders，那么默认为0，则next.css没有被postcsss-loader处理，会有兼容性问题

@import url('./next.css');
.k1{
    color:red
}

.k2{
    color:green
}

modules:true进行css模块化打包;可以避免css全局污染; import style from'./index.scss'

WARNING

css预编译处理器的loader应该先postcss-loader执行，否则无法给sass/less/stylus等里的css代码加上兼容性前缀

module.exports = {
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  "postcss-preset-env", // 能解决大多数样式兼容性问题
                ],
              },
            },
          },
        ],
      },
      {
        test: /\.s[ac]ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  "postcss-preset-env", // 能解决大多数样式兼容性问题
                ],
              },
            },
          },
          "sass-loader",
        ],
      },
      {
        test: /\.styl$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  "postcss-preset-env", // 能解决大多数样式兼容性问题
                ],
              },
            },
          },
          "stylus-loader",
        ],
      },
    ],
  },
  mode: "production",
};

可以在 package.json 文件中添加 browserslist 来控制样式的兼容性做到什么程度

{
  // 其他省略
  "browserslist": ["ie >= 8"]
}

{
  // 其他省略
  "browserslist": ["last 2 version", "> 1%", "not dead"]
}

# 字体文件打包

借助file-loader即可


......
{
	test:/\.(eot|ttf|svg)$/,
	use:{
		loader:'file-loader',
	}
},
.....

# 编写一个loader

1一个同步loader

const loaderUtils = require('loader-utils');

module.exports = function(source) {
	return source.replace('lee', 'world');
}

2一个异步loader

注意异步loader需要引入async()

const loaderUtils = require('loader-utils');

module.exports = function(source) {
	const options = loaderUtils.getOptions(this);
	const callback = this.async();

	setTimeout(() => {
		const result = source.replace('dell', options.name);
		callback(null, result);
	}, 1000);
}

# resolveLoader配置简化自定义loader配置路径

这组选项与 resolve 对象的属性集合相同，但仅用于解析 webpack 的 loader 包。

module.exports = {
  //...
  resolveLoader: {
    modules: ['node_modules'],
    extensions: ['.js', '.json'],
    mainFields: ['loader', 'main'],
  },
};

const path = require('path');

module.exports = {
	mode: 'development',
	entry: {
		main: './src/index.js'
	},
	resolveLoader: {
		modules: ['node_modules', './loaders']
	},
	module: {
		rules: [{
			test: /\.js/,
			use: [
				{
					loader: 'replaceLoader',
				},
				{
					loader: 'replaceLoaderAsync',
					options: {
						name: 'lee'
					}
				},
			]
		}]
	},
	output: {
		path: path.resolve(__dirname, 'dist'),
		filename: '[name].js'
	}
}

loader

当需要包装源代码，捕获，国际化等都可以使用自定义loader

# less文件loader处理

可以使用less工具来完成它的编译转换：

Less工具处理

npm install less -D

less安装包内自带lessc，可以去编译less成css，但是手动太麻烦

npx lessc ./src/css/title.less title.css

# less-loader

配置后自动使用less工具转换less到css

npm install less-loader -D

# eslint-loader（w4）

在webpack5中，被eslint-webpack-plugin插件取代

{
    test: /\.js$/,
    use:[
        {loader:'eslint-loader'}
    ],
    enforce: "pre", // 编译前检查
    exclude: /node_modules/, // 不检测的文件
    include: [path.resolve(__dirname, 'src')], // 指定检查的目录
    options: { // 这里的配置项参数将会被传递到 eslint 的 CLIEngine 
        formatter: require('eslint-friendly-formatter') // 指定错误报告的格式规范
    }
},

# babel-loader

Babel：JavaScript 编译器。

主要用于将 ES6 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。

配置文件配置文件由很多种写法：

babel.config.*：新建文件，位于项目根目录(（可以直接作用于Monorepos项目的子包，更加推荐）)
- babel.config.js
- babel.config.json
.babelrc.*：新建文件，位于项目根目录
- .babelrc
- .babelrc.js
- .babelrc.json

package.json 中 babel：不需要创建文件，在原有文件基础上写，Babel 会查找和自动读取它们，所以以上配置文件只需要存在一个即可

具体配置以 babel.config.js 配置文件为例：

module.exports = {
  // 预设
  presets: [],
};

# presets 预设

简单理解：就是一组 Babel 插件, 扩展 Babel 功能

@babel/preset-env: 一个智能预设，允许您使用最新的 JavaScript。
@babel/preset-react：一个用来编译 React jsx 语法的预设
@babel/preset-typescript：一个用来编译 TypeScript 语法的预设

在 Webpack 中使用

npm i babel-loader @babel/core @babel/preset-env -D

babel.config.js

module.exports = {
  presets: ["@babel/preset-env"],
};

webpack.config.js

const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");

module.exports = {
  module: {
      {
        test: /\.js$/,
        exclude: /node_modules/, // 排除node_modules代码不编译
        loader: "babel-loader",
		// 只有一个loader，可以不用use，然后它的配置options也可以写在同层
		// 也可以单独抽离出去
		// options:{
		// 	presets: ["@babel/preset-env"]
		// }
      },
    ],
  },
  mode: "development",
};

# vue-loader

解析.vue文件依赖vue-loader和@vue/compiler-sfc解析模板中的template。
同时配置VueLoaderPlugin插件

cnpm i vue-loader -D
cnpm install @vue/compiler-sfc -D //必须添加@vue/compiler-sfc来对template进行解析

const {VueLoaderPlugin} = require('vue-loader/dist/index')
module.exports = {
	module: {
		rules: [
			{
				test:/\.vue$/,
				loader:'vue-loader'
			}
		]
	},
	plugins: [
		new VueLoaderPlugin()
	]
}

# ts-loader

配置项目将ts编译成js

cnpm i typescript ts-loader -D

 module: {
    rules: [
      {
        test: /\.ts$/,
        use: "ts-loader",
        exclude: /node_modules/
      }
    ]
  },

# cache-loader

cache-loader 是 Webpack 的一个加载器（loader），它的主要作用是为其他加载器提供缓存功能。当你运行 Webpack 编译时，加载器（如 babel-loader, sass-loader 等）通常会执行一些转换操作，这些操作可能会非常耗时。通过使用 cache-loader，你可以缓存这些结果，以便在后续编译中重用，从而加速编译过程。

const path = require('path');  
  
module.exports = {  
  module: {  
    rules: [  
      {  
        test: /\.js$/,  
        exclude: /node_modules/,  
        use: [  
          'babel-loader',  
          // 使用 cache-loader 缓存 babel-loader 的结果  
          {  
            loader: 'cache-loader',  
            options: {  
              // 缓存目录，Webpack 会在这里存储缓存数据  
              cacheDirectory: path.resolve(__dirname, 'node_modules/.cache/babel-loader'),  
              // 缓存的键的生成选项  
              // 默认情况下，基于 loader 的上下文、选项和请求的资源路径来生成缓存键  
              // 你可以在这里提供一个函数来自定义缓存键的生成  
            },  
          },  
        ],  
      },  
      // 其他规则...  
    ],  
  },  
  // 其他 Webpack 配置...  
};

然而，值得注意的是，从 Webpack 5 开始，Webpack 自身已经内置了缓存机制，许多加载器（如 babel-loader）也支持了内置的缓存，因此你可能不再需要显式地使用 cache-loader。

如果你正在使用 Webpack 5 或更新的版本，并且你的加载器已经支持了内置的缓存，那么你可以直接在你的 Webpack 配置中启用缓存，而无需添加 cache-loader。这通常是通过设置 cache: { type: 'filesystem' } 在 Webpack 配置的 optimization 部分来完成的。

module.exports = {  
  // ...  
  optimization: {  
    // 启用 Webpack 内置的缓存  
    cache: {  
      type: 'filesystem',  
      // 其他缓存选项...  
    },  
  },  
  // ...  
};

# loader代码合并配置

filter(Boolean) 是一个常见的数组方法组合，用于过滤掉数组中的假值（falsy values）

// 获取处理样式的Loaders
const getStyleLoaders = (preProcessor) => {
  return [
    MiniCssExtractPlugin.loader,
    "css-loader",
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: [
            "postcss-preset-env", // 能解决大多数样式兼容性问题
          ],
        },
      },
    },
    preProcessor,
  ].filter(Boolean);
};

module.exports = {
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: getStyleLoaders(),
      },
      {
        test: /\.less$/,
        use: getStyleLoaders("less-loader"),
      },
      {
        test: /\.s[ac]ss$/,
        use: getStyleLoaders("sass-loader"),
      },
      {
        test: /\.styl$/,
        use: getStyleLoaders("stylus-loader"),
      },
    ],
  },

};

# oneOf之loader

打包时每个文件都会经过所有 loader 处理，虽然因为 test 正则原因实际没有处理上，但是都要过一遍。比较慢。oneOf顾名思义就是只能匹配上一个 loader, 剩下的就不匹配了。

module.exports = {
  module: {
    rules: [
      {
        oneOf: [
          {
            // 用来匹配 .css 结尾的文件
            test: /\.css$/,
            // use 数组里面 Loader 执行顺序是从右到左
            use: ["style-loader", "css-loader"],
          },
          {
            test: /\.styl$/,
            use: ["style-loader", "css-loader", "stylus-loader"],
          },
          {
            test: /\.js$/,
            exclude: /node_modules/, // 排除node_modules代码不编译
            loader: "babel-loader",
          },
        ],
      },
    ],
  }
};

# Include/Exclude之loader

开发时需要使用第三方的库或插件，所有文件都下载到 node_modules 中了。而这些文件是不需要编译可以直接使用的。

所以在对 js 文件处理时，要排除 node_modules 下面的文件。

include：包含，只处理 xxx 文件
exclude：排除，除了 xxx 文件以外其他文件都处理

const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
module.exports = {
  module: {
    rules: [
		{
		test: /\.js$/,
		// exclude: /node_modules/, // 排除node_modules代码不编译
		include: path.resolve(__dirname, "../src"), // 也可以用包含二者只用一个
		loader: "babel-loader",
		},
    ],
  },
  plugins: [
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "../src"),
      exclude: "node_modules", // 默认值 可省略
    })
  ],
};

# webpack开发一个 loader

/**
content 源文件的内容
map SourceMap 数据
meta 数据，可以是任何内容
 */

// loaders/loader1.js
module.exports = function loader1(content) {
  console.log("hello loader");
  return content;
};

使用和正常loader一致

module.exports={
    module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve(__dirname, "../src"), // 也可以用包含二者只用一个
        loader: "./loader/loader.js",//书写的loader假设放在loader文件夹下
      }
    ],
  },
}

# webpack loader分类

# 同步 loader

两种模式：

module.exports = function (content, map, meta) {
  return content;
};

this.callback 方法则更灵活，因为它允许传递多个参数，而不仅仅是 content。

module.exports = function (content, map, meta) {
  // 传递map，让source-map不中断
  // 传递meta，让下一个loader接收到其他参数
  this.callback(null, content, map, meta);
  return; // 当调用 callback() 函数时，总是返回 undefined
};

# 异步 loader

module.exports = function (content, map, meta) {
  const callback = this.async();
  // 进行异步操作
  setTimeout(() => {
    // 注意： 同步loader中不能写异步代码，否则会报错
    callback(null, result, map, meta);
  }, 1000);
};

由于同步计算过于耗时，在 Node.js 这样的单线程环境下进行此操作并不是好的方案，我们建议尽可能地使你的 loader 异步化。但如果计算量很小，同步 loader 也是可以的。

# raw loader

raw loader 需要在exports对象中添加raw属性为true

//raw loaders接收到的content是Buffer数据
module.exports = function (content, map, meta) {
  console.log("content", content); //<Buffer 63 6f 6e 73 6f 6c 65 2e 6c 6f 67 28 27 68 65 6c 6c 6f 20 6d 61 69 6e 27 29>
  return content;
};
module.exports.raw = true; // 开启 Raw Loader

# Pitching Loader

module.exports = function (content) {
  return content;
};
// 多了个配置pitch，可以利用它做熔断机制
module.exports.pitch = function (remainingRequest, precedingRequest, data) {
  console.log("do somethings");
};

webpack 会先从左到右执行 loader 链中的每个 loader 上的 pitch 方法（如果有），然后再从右到左执行 loader 链中的每个 loader 上的普通 loader 方法。

在这个过程中如果任何 pitch 有返回值，则 loader 链被阻断。webpack 会跳过后面所有的的 pitch 和 loader，直接进入上一个 loader。

module.exports = function (content) {
  console.log("normal loader 2");
  return content;
};

module.exports.pitch = function () {
  console.log("pitch loader 2");
  return "result";//就此熔断，返回上一个loader
};

# loader部分api

方法名	含义	用法
this.async	异步回调 loader。返回 this.callback	const callback = this.async()
this.callback	可以同步或者异步调用的并返回多个结果的函数	this.callback(err, content, sourceMap?, meta?)
this.getOptions(schema)	获取 loader 的 options	this.getOptions(schema)
this.emitFile	产生一个文件	this.emitFile(name, content, sourceMap)
this.utils.contextify	返回一个相对路径	this.utils.contextify(context, request)
this.utils.absolutify	返回一个绝对路径	this.utils.absolutify(context, request)

# 手写loader

需求：清除console.log

// loaders/clean-log-loader.js
module.exports = function cleanLogLoader(content) {
  // 将console.log替换为空
  return content.replace(/console\.log\(.*\);?/g, "");
};

需求：添加banner

const schema = require("./schema.json");

module.exports = function (content) {
  // 获取loader的options，同时对options内容进行校验
  // schema是options的校验规则（符合 JSON schema 规则）
  const options = this.getOptions(schema);

  const prefix = `
    /*
    * Author: ${options.author}
    */
  `;

  return `${prefix} \n ${content}`;
};

schema.json

{
  "type": "object",
  "properties": {
    "author": {
      "type": "string"
    }
  },
  "additionalProperties": false
}

JSON Schema (opens new window)

需求：手写 babel-loader

npm i @babel/core @babel/preset-env -D

const schema = require("./schema.json");
const babel = require("@babel/core");

module.exports = function (content) {
  const options = this.getOptions(schema);
  // 使用异步loader
  const callback = this.async();
  // 使用babel对js代码进行编译
  babel.transform(content, options, function (err, result) {
    callback(err, result.code);
  });
};

{
  "type": "object",
  "properties": {
    "presets": {
      "type": "array"//数组，可考虑进一步扩展
    }
  },
  "additionalProperties": true
}

webpack配置

 {
    test: /\.js$/,
    loader: "./loaders/babel-loader",
    options: {
      presets: ["@babel/preset-env"],//预设
    },
    },

需求：file-loader,作用：将文件原封不动输出出去

npm i loader-utils -D

const loaderUtils = require("loader-utils");

async function fileLoader(content) {
  // 根据文件内容生产一个新的文件名称
  const filename = loaderUtils.interpolateName(this, "[hash].[ext]", {
    content,
  });
  // 输出文件
  this.emitFile(filename, content);
  // 暴露出去，给js引用。
  // 记得加上''
  return `export default '${filename}'`;
}

// loader 解决的是二进制的内容
// 图片是 Buffer 数据
fileLoader.raw = true;

module.exports = fileLoader;

webpack配置

{
  test: /\.(png|jpe?g|gif)$/,
  loader: "./loaders/file-loader.js",
  type: "javascript/auto", // 解决图片重复打包问题,webpack5默认会去处理图片字体等文件，如果不需要这里需要配置type javascript/auto
},

需求:style-loader,作用：动态创建 style 标签，插入 js 中的样式代码，使样式生效。

直接使用style-loader，只能处理样式、不能处理样式中引入的其他资源
使用css loader 借助css-loader解决样式中引入的其他资源的问题(解决依赖)，此时style-loader接收css-loader的返回值。但是css-loader暴露了一段js代码，style-loader需要执行js代码，得到返回值，再动态创建style标签，插入到页面上——不好操作
借助pitch获取返回处理请求，利用行内loader解决

const styleLoader = () => {};

styleLoader.pitch = function (remainingRequest) {
  /*
    remainingRequest: C:\Users\86176\Desktop\source\node_modules\css-loader\dist\cjs.js!C:\Users\86176\Desktop\source\src\css\index.css
      这里是inline loader用法，代表后面还有一个css-loader等待处理

    最终我们需要将remainingRequest中的路径转化成相对路径，webpack才能处理
      希望得到：../../node_modules/css-loader/dist/cjs.js!./index.css

    所以：需要将绝对路径转化成相对路径
    要求：
      1. 必须是相对路径
      2. 相对路径必须以 ./ 或 ../ 开头
      3. 相对路径的路径分隔符必须是 / ，不能是 \
  */
  const relativeRequest = remainingRequest
    .split("!")
    .map((part) => {
      // 将路径转化为相对路径
      const relativePath = this.utils.contextify(this.context, part);
      return relativePath;
    })
    .join("!");

  /*
    !!${relativeRequest} 
      relativeRequest：../../node_modules/css-loader/dist/cjs.js!./index.css
      relativeRequest是inline loader用法，代表要处理的index.css资源, 使用css-loader处理
      !!代表禁用所有配置的loader，只使用inline loader。（也就是外面我们style-loader和css-loader）,它们被禁用了，只是用我们指定的inline loader，也就是css-loader

    import style from "!!${relativeRequest}"
      引入css-loader处理后的css文件
      为什么需要css-loader处理css文件，不是我们直接读取css文件使用呢？
      因为可能存在@import导入css语法，这些语法就要通过css-loader解析才能变成一个css文件，否则我们引入的css资源会缺少
    const styleEl = document.createElement('style')
      动态创建style标签
    styleEl.innerHTML = style
      将style标签内容设置为处理后的css代码
    document.head.appendChild(styleEl)
      添加到head中生效
  */
  const script = `
    import style from "!!${relativeRequest}"
    const styleEl = document.createElement('style')
    styleEl.innerHTML = style
    document.head.appendChild(styleEl)
  `;

  // style-loader是第一个loader, 由于return导致熔断，所以其他loader不执行了（不管是normal还是pitch）
  return script;
};

module.exports = styleLoader;

← webpack plugins →