loader 用于转换某些类型的模块,而plugin则可以用于执行范围更广的任务。
包括:打包优化,资源管理,注入环境变量等。
Webpack Plugin
clean-webpack-plugin
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
entry: "./src/main.js",
output: {
filename: "js/bundle.js",
path: path.resolve(__dirname, "./build"),
},
module: {
rules: [
]
},
plugins: [
new CleanWebpackPlugin(),
]
}
html-webpack-plugin
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: "./src/main.js",
output: {
filename: "js/bundle.js",
path: path.resolve(__dirname, "./build"),
},
module: {
rules: [
]
},
plugins: [
new HtmlWebpackPlugin({
title: "webpack",
template: "./public/index.html"
}),
]
}
clean-webpack-plugin
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
entry: "./src/main.js",
output: {
filename: "js/bundle.js",
path: path.resolve(__dirname, "./build"),
},
module: {
rules: [
]
},
plugins: [
new CleanWebpackPlugin(),
]
}
Define-Plugin
webpack 内置插件
const path = require('path');
const {DefinePlugin} = require('webpack')
module.exports = {
entry: "./src/main.js",
output: {
filename: "js/bundle.js",
path: path.resolve(__dirname, "./build"),
},
module: {
rules: [
]
},
plugins: [
new DefinePlugin({
BASE_URL: " '/ '"
}),
]
}
copy-webpack-plugin
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
entry: "./src/main.js",
output: {
filename: "js/bundle.js",
path: path.resolve(__dirname, "./build"),
},
module: {
rules: [
]
},
plugins: [
new CopyWebpackPlugin({
patterns: [
{
from: "public",
globOptions: {
ignore: [
"**/index.html",
"**/.DS_Store",
"**/abc.txt"
]
}
}
]
})
]
}
示例
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { DefinePlugin } = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
entry: "./src/main.js",
output: {
filename: "js/bundle.js",
// 必须是一个绝对路径
path: path.resolve(__dirname, "./build"),
// assetModuleFilename: "img/[name].[hash:6][ext]"
},
module: {
rules: [
{
// 规则使用正则表达式
test: /\.css$/, // 匹配资源
use: [
// { loader: "css-loader" },
// 注意: 编写顺序(从下往上, 从右往做, 从后往前)
"style-loader",
{
loader: "css-loader",
options: {
importLoaders: 1
}
},
"postcss-loader"
],
// loader: "css-loader"
},
{
test: /\.less$/,
use: [
"style-loader",
{
loader: "css-loader",
options: {
importLoaders: 2
}
},
"postcss-loader",
"less-loader"
]
},
{
test: /\.(png|jpe?g|gif|svg)$/,
// type: "asset/resource", file-loader的效果
// type: "asset/inline", url-loader
type: "asset",
generator: {
filename: "img/[name].[hash:6][ext]"
},
parser: {
dataUrlCondition: {
maxSize: 100 * 1024
}
}
},
{
test: /\.ttf|eot|woff2?$/i,
type: "asset/resource",
generator: {
filename: "font/[name].[hash:6][ext]"
}
}
]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: "webpack",
template: "./public/index.html"
}),
new DefinePlugin({
BASE_URL: '"./"'
}),
new CopyWebpackPlugin({
patterns: [
{
from: "public",
globOptions: {
ignore: [
"**/index.html",
"**/.DS_Store",
"**/abc.txt"
]
}
}
]
})
]
}