学习vue第三天--webpack的插件处理cssloader loader 加载器的作用：协助 webpack 打包处

loader

在实际开发过程中，webpack 默认只能打包处理以.js 后缀名结尾的模块。其他非.js 后缀名结尾的模块，webpack 默认处理不了，需要调用 loader 加载器才可以正常打包，否则会报错！

loader 加载器的作用：协助 webpack 打包处理特定的文件模块。比如：

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

打包处理 css 文件

运行 npm i style-loader@3.0.0 css-loader@5.2.6 -D 命令，安装处理 css 文件的 loader

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

module: {
  rules: [
    // 定义了不同模块对应的 loader
    { test: /\.css$/, use: ["style-loader", "css-loader"] },
  ];
}

其中，test 表示匹配的文件类型，use 表示对应要调用的 loade 注意：

use 数组中指定的 loader 顺序是固定的
多个 loader 的调用顺序是：从后往前调用

打包处理 less 文件

运行 npm i less-loader@10.0.1 less@4.1.1 -D 命令，安装处理 less 文件的 loader

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

module: {
  rules: [
    // 处理 .less 文件的 loader
    { test: /\.less$/, use: ["style-loader", "css-loader", "less-loader"] },
  ];
}

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

运行 npm i url-loader@4.1.1 file-loader@6.2.0 -D 命令，安装

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

module: {
  rules: [
    // 处理图片文件的 loader
    // 如果需要调用的 loader 只有一个，则只传递一个字符串也行，如果有多个loader，则必须指定数组
    // 在配置 url-loader 的时候，多个参数之间，使用 & 符号进行分隔
    {
      test: /\.jpg|png|gif$/,
      use: "url-loader?limit=470&outputPath=images",
    },
  ];
}

其中 ? 之后的是 loader 的参数项：

limit 用来指定图片的大小，单位是字节（byte）
只有 ≤ limit 大小的图片，才会被转为 base64 格式的图片

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

运行 npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D

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

module: {
  rules: [
  // 使用 babel-loader 处理高级的 JS 语法
       // 在配置 babel-loader 的时候，程序员只需要把自己的代码进行转换即可；一定要排除 node_modules 目录中的 JS 文件
       // 因为第三方包中的 JS 兼容性，不需要程序员关心
       { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
  ];
}

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

module.exports = {
 // 声明 babel 可用的插件
 // 将来，webpack 在调用 babel-loader 的时候，会先加载 plugins 插件来使用
 plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]]
}

打包

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack serve",
    "build":"webpack --mode production"
  },