在实际开发过程中,webpack默认只能打包处理以 ‘.js’ 后缀名结尾的模块,其他非 ‘.js’ 后缀名结尾的模块,webpack 默认处理不了,需要调用 loader 加载器才可以正常打包,否则会报错
loader 加载器的作用: 协助 webpack 打包处理特定的文件模块,比如:

  • css-loader 可以打包处理 ‘.css’ 相关的文件
  • less-loader 可以打包处理 ‘.less’ 相关的文件
  • babel-loader 可以打包处理 webpack 无法处理的高级JS语法

项目常用：
1、file-loader：把⽂件输出到⼀个⽂件夹中，在代码中通过相对 URL 去引⽤输出的⽂件。
2、url-loader：和 file-loader 类似，但是能在⽂件很⼩的情况下以 base64 的⽅式把⽂件内容注⼊到代码中去。
3、source-map-loader：加载额外的 Source Map ⽂件，以⽅便断点调试。
4、image-loader：载并且压缩图⽚⽂件。
5、babel-loader：将ES6转化为ES5。
6、css-loader：加载 CSS，⽀持模块化、压缩、⽂件导⼊等特性。
7、style-loader：把 CSS 代码注⼊到 JavaScript 中，通过 DOM 操作去加载 CSS。
8、eslint-loader:通过 ESLint 检查 JavaScript 代码。
————————————————

常见的loader

打包处理 css 文件

  1. 运行以下命令,安装处理 css 文件的 loader
    1. npm i style-loader@3.0.0 css-loader@5.2.6 -D
    2.在 webpack.config.js 的 module -> rules 数组中,添加 loader 规则如下:
    1. module: {
    2.      //所有第三方文件模块的匹配机制
    3.      rules: [
    4.          //文件后缀名的匹配规则 匹配到test指定的文件类型 使用use中对应的loader
    5.          {test: /\.css$/, use: ['style-loader', 'css-loader']}
    6.      ]
    7.  }
    其中,test 表示匹配的文件类型,use 表示对应要调用的loader
    注意:
    use 数组中指定的 loader 顺序是固定的
    多个 loader 的调用顺序是: 从后往前调用,webpack 把 index.css 这个文件先转交给最后一个 loader 进行处理(先转交给css.loader),当 css-loader 处理完毕之后,会把处理的结果,转交给下一个 loader(转交给style-loader),当 style-loader 处理完毕之后,发现没有下一个 loader 时,九八处理的结果转交给 webpack,webpack 将 style-loader 处理的结果合并到 /dist/bundle.js 中,最终生成打包好的文件

    打包处理 less 文件

  2. 运行以下命令安装 less-loader 以及 less
    1. npm i less-loader@10.0.1 less@4.1.1 -D
  3. 在 webpack.config.js 的 module -> rules 数组中,添加规则:
    1. module: {
    2.      //所有第三方文件模块的匹配机制
    3.      rules: [
    4.          //文件后缀名的匹配规则 匹配到test指定的文件类型 使用use中对应的loader
    5.          {test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']}
    6.      ]
    7.  }

    打包处理样式表中与 url路径 相关的文件

  4. 运行以下命令安装 less-loader 以及 less
    1. npm i url-loader@4.1.1 file-loader@6.2.0 -D

  5. 在 webpack.config.js 的 module -> rules 数组中,添加规则:

    1. module: {
    2.      //所有第三方文件模块的匹配机制
    3.      rules: [
    4.          //文件后缀名的匹配规则 匹配到test指定的文件类型 使用use中对应的loader
    5.          //处理 url路径 的loader
    6.          {test: /\.jpg|png|gifs/, use: 'url-loader?limit=22229'}
    7.      ]
    8.  }

    其中 ‘?’ 之后的时 laoder 的参数项:

  6. limit 用来指定图片的大小,单位是字节(byte)

  7. 只有 ≤limit 大小的图片,才会被转为 base64 格式的图片
  8. 使用base64获取图片可以防止发起不必要的请求,可以将小图片转换为base64格式,过大的图片不适合此方法

    打包处理 js 文件中的高级语法

    webpack 只能打包处理一部分高级的 Javascript 语法,对于一些 webpack 无法处理的高级 js 语法,需要借助于 babel-loader 进行打包处理,例如 webpack 无法处理下面的 Javascript 代码: ```javascript //定义了名为 info 的装饰器 function info(target) { //为目标添加静态属性 info target.info = ‘Person info’ }

//为 Person 类应用 info 装饰器 @info class Person {}

//打印 Person 的静态属性 info console.log(Person.info);

  1. 安装bable-loader相关的包
  2. ```javascript
  3. npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D

使用babel-loader

  1. //使用 babel-loader 处理高级的 JS 语法 exclude 为排除项
  2. //配置 babel-loader 的时候 只需要把自己的代码进行转换
  3. //一定要排除  node_modules 目录中的 JS 文件 因为不需要担心第三方包的兼容性
  4. {test: /\.js$/, use: 'babel-loader', exclude: /node-modules/}

其中的 exclude 为排除项,排除此目录中的js文件

配置 babel-loader

在项目根目录下,创建名为 babel.config.js 的配置文件,定义 Babel 的配置项如下:

  1. module.exports = {
  2.     //声明 babel 可用的插件
  3.     plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]]
  4. }

Loader的思路