npm | 认识 loader | 犀牛的博客

loader 用于对模块的源代码进行转换。loader 可以使你在 import 或”加载”模块时预处理文件。

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

解析顺序

webpack 对于 loader 的调用是从右往左的，从下到上。

无论是从右到左还是从上到下都是一个顺序，放在一行就是从右到左，不同行，就是从上到下。

{
  // 增加对 SCSS 文件的支持
  test: /\.scss|\.css/,
  // SCSS 文件的处理顺序为先 sass-loader 再 css-loader 再 style-loader
  use: [
    'style-loader',
    {
      loader: 'css-loader',
      // 给 css-loader 传入配置项
      options: {
        importLoaders: 2,
      },
    },
    'postcss-loader',
    {
      loader: 'sass-loader',
    },
  ],
},

SCSS 文件的处理顺序为先 sass-loader 再 css-loader 再 style-loader。