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'})]
};
