1
Webpack：理解 Webpack 加载器 Loaders
1 Webpack 加载器简介
1.1 1 什么是 Webpack 加载器
Webpack 加载器（Loaders）是 Webpack 的核心功能之一，它们用于将源代
码转换为模块，使得 Webpack 能够理解和处理。加载器可以处理各种类型的文
件，如 CSS、JavaScript、图片、字体等，将它们转换成 Webpack 能够理解的模
块格式。加载器的运行是按链式调用的，从右到左，从下到上，依次处理文件。
1.1.1 示例：使用 Babel 加载器处理 ES6 代码
假设我们有一个使用了 ES6 语法的 JavaScript 文件，但目标浏览器不支持
ES6，这时我们可以使用 Babel 加载器将 ES6 代码转换为 ES5 代码。
webpack.config.js
//
导入路径模块
const path = require('path');
module.exports = {
//
入口文件
entry: './src/index.js',
//
输出配置
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
//
加载器配置
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
},
},
},
],
},
};
剩余19页未读，继续阅读
资源评论
