Webpack基本配置（二）--url和babel-loader的设置与使用

2024-02-05 15:49:41

Webpack 简介
Webpack是一个现代化的构建工具，可以将多种类型的源文件（如JavaScript、CSS、图像等）转换为单个或多个优化过的文件，用于在浏览器中运行。它通常与诸如Babel和Sass等预处理器结合使用，用于将新语法编译成旧语法，以便在旧浏览器中运行。

Loader 介绍

Loader是Webpack用于处理不同类型文件的工具，每个loader都有特定的功能，例如：Babel-loader用于将ES6代码编译成ES5代码，Url-loader用于将图片文件转换为DataURL或文件路径，File-loader用于将文件转换为文件路径。

Url-loader 配置及使用

Url-loader的作用是将图片文件转换为DataURL或文件路径，它的工作原理是：

将小于指定限制（默认为8192字节）的图片转换为DataURL
将大于指定限制的图片转换为文件路径

配置 Url-loader：

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/i, // 对图片文件进行匹配
        use: [
          {
            loader: 'url-loader', // 使用 url-loader 加载器
            options: {
              limit: 8192, // 小于8192字节的图片转换为DataURL
            },
          },
        ],
      },
    ],
  },
};

使用 Url-loader：
在代码中引用图片文件时，Webpack会自动处理DataURL或文件路径：

// app.js
import logo from './logo.png'; // 引用图片文件

// 生成的代码：
// logo.png
//   module.exports = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUg..."; // 小于8192字节的图片转换为DataURL

// 或

// logo.png
//   module.exports = __webpack_require__.p + "static/media/logo.png"; // 大于8192字节的图片转换为文件路径

Babel-loader 配置及使用

Babel-loader的作用是将ES6代码编译成ES5代码，以便在旧浏览器中运行。它的工作原理是：

将ES6代码转换为ES5代码
支持多种预设（preset），如ES2015、React、Vue等
支持多种插件（plugin），用于扩展Babel的功能

配置 Babel-loader：

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/, // 对 JavaScript 文件进行匹配
        exclude: /node_modules/, // 排除 node_modules 文件夹
        use: [
          {
            loader: 'babel-loader', // 使用 babel-loader 加载器
            options: {
              presets: ['@babel/preset-env'], // 使用 ES2015 预设
              plugins: ['@babel/plugin-transform-runtime'], // 使用 runtime 插件
            },
          },
        ],
      },
    ],
  },
};

使用 Babel-loader：
在代码中使用ES6语法时，Webpack会自动将代码编译成ES5代码：

// app.js
class MyClass {
  constructor() {
    this.name = 'John';
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name}!`);
  }
}

const myClass = new MyClass();
myClass.sayHello(); // Hello, my name is John!

// 生成的代码：
// app.js
var MyClass = /** @class */ (function () {
  function MyClass() {
    this.name = 'John';
  }
  MyClass.prototype.sayHello = function () {
    console.log("Hello, my name is " + this.name + "!");
  };
  return MyClass;
})();

var myClass = new MyClass();
myClass.sayHello(); // Hello, my name is John!