loader概述

Webpack将一切文件视为模块，但是webpack原生是只能解析js和json文件，如果想将其他文件也打包的话，就会用到loader。 所以Loader的作用是让webpack拥有了加载和解析非JavaScript文件的能力。
将静态资源视为模块，像加载JS文件一样加载它们，可以使工程结构更加直观，代码的可维护性更强。举个例子，加载一个组件需要同时引入CSS文件，如果分别在CSS文件和JS文件分开处理，需要分别维护CSS和JS加载，如果每个组件都在JS中加载了自身CSS，调用时只需要引入JS文件即可。

loader的配置

安装loader

  1. npm install css-loader
  2. npm install style-loader

配置webpack.config.js

模块的处理规则都在module.rules中配置。 module.rules类型为数组，每一项都是一个Object，里面描述了对于什么类型的文件（test），使用那些预处理器处理(use)和使用的参数（options）
webpack打包时是按照数组从后往前的顺序将资源交给loader处理的
exclude与include是用来排除或包含指定目录下的模块，可接受正则表达式、字符串（文件绝对路径）、数组。exclude优先级更高。
resource与issuer可用于更加精确地确定模块规则的作用范围。**module.rules**中的test、use、options配置其实都是对resource（被加载模块）的配置，也可以将其放到**module.rules.resource**中,但两种方法只能选择一种；issuer的配置与resource的配置类似。
enforce用于指定loader的执行顺序。pre表示在所有正常loader之前执行；post表示在所有正常loader之后执行。

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

常见Loader

样式

  • css-loader：将CSS文件变成commonJS模块，加载到JS中：处理CSS的各种加载语法（@import和url()函数等），支持模块化、压缩、文件导入等特性
  • style-loader：使样式起作用：创建style标签，然后将JS中的样式插入到style标签中。
  • less-loader和less：将less文件编译为css文件
  • node-sass和sass-loader:：将SCSS语法编译为CSS

  • postcss-loader:编译插件容器，接收样式并交由编译插件处理

    • autoprefixer：自动添加前缀，进行兼容性处理
    • stylelint：CSS质量检测工具
    • postcss-cssnext：支持最新的CSS语法特性

      图片

  • file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件

  • url-loader：和 file-loader 类似，但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去
  • image-loader：加载并且压缩图片文件

  • file-loader和url-loader是webpack4使用的预处理期，在webpack5中

    Source Map

  • source-map-loader：加载额外的 Source Map 文件，以方便断点调试

    代码转换

  • babel-loader：把 ES6 转换成 ES5

    语法检查

  • eslint-loader：通过 ESLint 检查 JavaScript 代码，可通过enforce:’pre’设置优先执行

    常见Plugin

  • MiniCssExtractPlugin: 样式文件默认不单独输出，会打包到js中，如果需要提取为单独的CSS文件，需要使用MiniCssExtractPlugin