webpack中loader(加载器)的理解

webpack在对项目进行打包时，默认是只能识别后缀名为.js的文件，而且对于js中的一些高级语法也无法进行打包和处理，要想处理如css,less等后缀名文件，我们就要用到loader（加载器）了，

目前使用较多的loader有以下几种：

1.打包处理.css文件

① 首先在终端中运行:

npm i style-loader@3.0.0 css-loader@5.2.6 -D

安装处理.css文件的loader

②在webpack.config,js的module->rules数组中，添加loader规则：

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

其中，test表示匹配的文件类型，use表示对应要调用的loader

注意：

        use数组中指定的loader顺序是固定的

        多个loader的调用顺序是从后往前调用

其具体调用规则见webpack中loader调用过程_m0_61631823的博客-CSDN博客

2.打包处理.less文件

①在终端中运行