加载规则和自定义Loader的加载指南

前言

webpack是一款非常受欢迎的模块打包工具，它可以将多种格式的文件打包成适合浏览器运行的JavaScript代码。webpack loader是webpack的一个重要特性，它允许你将不同的文件类型转换成webpack能够理解的格式。比如，你可以使用style-loader和css-loader将CSS文件转换成JavaScript代码，这样webpack就可以将CSS文件打包到你的项目中。

webpack loader加载规则

webpack loader的加载规则是通过webpack.config.js文件中的module.rules属性来配置的。module.rules属性是一个数组，每个元素都是一个对象，这个对象了loader的加载规则。

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

上面的配置表示，当webpack遇到以.css结尾的文件时，它会使用style-loader和css-loader来处理这些文件。style-loader会将CSS代码转换成JavaScript代码，css-loader会将CSS代码解析成webpack能够理解的格式。

webpack loader的加载

webpack loader的加载过程是通过webpack的loaderRunner来完成的。loaderRunner会根据module.rules属性中的配置，依次执行每个loader。

loaderRunner.runLoaders({
  resource: '/path/to/file.css',
  loaders: [
    {
      loader: 'style-loader',
      options: {}
    },
    {
      loader: 'css-loader',
      options: {}
    }
  ]
}, function(err, result) {
  // ...
});

上面的代码演示了loaderRunner是如何加载style-loader和css-loader的。loaderRunner会先执行style-loader，然后执行css-loader。

webpack自定义loader的加载

你也可以自定义自己的webpack loader。自定义loader的加载过程与加载内置的loader类似。你只需要创建一个JavaScript文件，并在其中实现loader的逻辑。然后，你就可以在webpack.config.js文件中配置你的自定义loader。

module: {
  rules: [
    {
      test: /\.my-loader$/,
      use: './path/to/my-loader.js'
    }
  ]
}

上面的配置表示，当webpack遇到以.my-loader结尾的文件时，它会使用./path/to/my-loader.js文件中的loader来处理这些文件。

实际案例分析

让我们结合实际案例来分析style-loader和css-loader的实现。

style-loader

style-loader是一个非常简单的loader，它的主要作用是将CSS代码转换成JavaScript代码。style-loader的实现如下：

module.exports = function(source) {
  return `var style = document.createElement('style');\nstyle.innerHTML = ${JSON.stringify(source)};\ndocument.head.appendChild(style);`;
};

上面的代码首先创建一个style元素，然后将CSS代码设置到style元素的innerHTML属性中，最后将style元素添加到document.head中。这样，CSS代码就可以在页面中生效了。

css-loader

css-loader是一个功能更强大的loader，它可以将CSS代码解析成webpack能够理解的格式。css-loader的实现如下：

module.exports = function(source) {
  var result = '';
  var lines = source.split('\n');
  for (var i = 0; i < lines.length; i++) {
    var line = lines[i];
    if (line.indexOf('@import') === 0) {
      result += `require(${JSON.stringify(line.slice(8, -1))});\n`;
    } else {
      result += `module.exports = ${JSON.stringify(line)};\n`;
    }
  }
  return result;
};

上面的代码首先将CSS代码分成多行，然后逐行解析。如果某行代码是@import语句，则将该行代码转换成require语句。否则，将该行代码转换成一个module.exports语句。这样，CSS代码就可以被webpack打包成JavaScript代码了。

结语

webpack loader是一个非常强大的工具，它可以让你轻松地将不同格式的文件转换成webpack能够理解的格式。本文深入探讨了webpack loader，包括loader的加载规则、loader的加载和自定义loader的加载。我们还结合实际案例分析了style-loader和css-loader的实现。希望本文能帮助你更好地理解webpack loader。