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
模块。
示例:
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
配置合并成一个。
示例:
javascript
// 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'
})
]
};