我要评论loader 的本质为函数，函数中的 this 作为上下文会被 webpack 填充，因此我们不能将 loader 设为一个箭头函数。一般在编写 loader 的过程中，保持功能单一，避免做多种功能。
loader 是一个转换器，它将源代码从一种格式转换成另一种格式。例如，你可以使用 loader 将 typescript 代码转换成 javascript 代码。loader 通常在 module.rules 配置中指定。
常用的一些 loader：
- babel-loader: 用于将
es6+代码转换成es5代码，以便在旧版浏览器中运行。 - css-loader: 用于将
css代码加载到javascript模块中。 - style-loader: 用于将
css代码注入到html的<style>标签中。 - file-loader: 用于将文件（如图片、字体等）加载到
javascript模块中，并返回该文件的url。 - url-loader: 类似于
file-loader，但它可以将小文件（如图片、字体等）转换成data url，以便在html中内联使用。 - ts-loader: 用于将
typescript代码转换成javascript代码。 - sass-loader: 用于将
sass/scss代码转换成css代码。 - less-loader: 用于将
less代码转换成css代码。 - vue-loader: 用于将
vue.js单文件组件 (sfc) 转换成javascript模块。
示例：
// vue.config.js
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(png|jpg|gif|svg)$/,
use: ['file-loader']
}
]
}
};
plugin 是一个扩展器，它可以对 webpack 的构建流程进行自定义。plugin 通常在 plugins 配置中指定。例如，你可以使用 plugin 来压缩你的 javascript 代码，或者生成一个 html 文件来为你的应用提供一个入口点。
常用的一些 plugin：
- html-webpack-plugin: 用于生成一个
html文件来为你的应用提供一个入口点。 - clean-webpack-plugin: 用于在每次构建之前清理输出目录。
- mini-css-extract-plugin: 用于将
css代码提取到单独的文件中。 - copy-webpack-plugin: 用于将文件从源目录复制到目标目录。
- webpack-bundle-analyzer: 用于生成一个交互式的
webpack包分析器报告。 - terser-webpack-plugin: 用于压缩
javascript代码。 - optimize-css-assets-webpack-plugin: 用于压缩
css代码。 - compression-webpack-plugin: 用于将文件压缩成
gzip或brotli格式。 - webpack-merge: 用于将多个
webpack配置合并成一个。
示例：
// vue.config.js
const htmlwebpackplugin = require('html-webpack-plugin');
const { cleanwebpackplugin } = require('clean-webpack-plugin');
module.exports = {
plugins: [
new cleanwebpackplugin(),
new htmlwebpackplugin({
template: './src/index.html'
})
]
};到此这篇关于webpack中loader和plugin的区别小结的文章就介绍到这了,更多相关webpack loader和plugin内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论