Loader
-
作用:
- 处理文件:Webpack 将项目中的每个文件都视为模块,而 loader 的主要任务是将这些模块转换成 webpack 可以处理的有效模块。
- 转换资源:loader 可以将不同类型的文件(例如 JavaScript、CSS、图片等)转换成 webpack 能够处理的模块。
-
用法:
- loader 通常是在
module.rules
数组中配置的。每个 loader 会单独地处理特定类型的文件。例如,处理 CSS 文件的 loader 可以是css-loader
,处理图片的 loader 可以是file-loader
或url-loader
。
- loader 通常是在
-
示例:
module.exports = { module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] }, { test: /\.(png|jpg|gif)$/, use: [ { loader: 'file-loader', options: { name: '[name].[ext]', outputPath: 'images/' } } ] } ] } };
Plugin
-
作用:
- 执行任务:plugin 可以用于执行范围更广的任务,例如打包优化、资源管理、注入环境变量等。
- 处理打包阶段:plugin 可以监听 webpack 生命周期的事件,并在合适的时机执行任务。
-
用法:
- plugin 是通过在 webpack 配置中实例化后传递给
plugins
数组的。一个 webpack 配置可以同时使用多个 plugin。
- plugin 是通过在 webpack 配置中实例化后传递给
-
示例:
const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ] };
区别总结
- loader 主要用于实现 webpack 对不同类型模块的转换和加载,处理单个文件或文件类型。
- plugin 主要用于执行更广泛的任务和自定义功能,通过监听 webpack 生命周期事件来执行操作,可以影响 webpack 整个打包过程。