loader是用于特定的模块的类型转换,plugin用于执行更加广泛的任务,比如打包优化、资源管理、环境变量注入等。
CleanWebpackPlugin
用于清除之前打包的文件。npm install clean-webpack-plugin
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
plugins: [
new CleanWebpackPlugin()
]
DefinePlugin
DefinePlugin允许在编译时创建配置的全局常量,是一个webpack内置的插件(不需要单独安装)
比如:全局注册一个名为BASE_URL
const { DefinePlugin } = require('webpack');
plugins: [
new DefinePlugin({
BASE_URL: '"./"'
})
]
CopyWebpackPlugin
安装:npm install copy-webpack-plugin 。接下来配置CopyWebpackPlugin即可:文章来源:https://www.toymoban.com/news/detail-493022.html
- 复制的规则在patterns中设置
- from:设置从哪一个源中开始复制
- to:复制到的位置,可以省略,会默认复制到打包的目录下
- globOptions:设置一些额外的选项,其中可以编写需要忽略的文件
- .DS_Store:mac目录下回自动生成的一个文件
- index.html:也不需要复制,因为我们已经通过HtmlWebpackPlugin完成了index.html的生成。
new CopyWebpackPlugin({
patterns: [
{
from: "public",
globOptions: {
ignore: [
"**/index.html",
"**/.DS_Store",
]
}
}
]
})
MiniCssExtractPlugin
MiniCssExtractPlugin可以帮助我们将css提取到一个独立的css文件中,该插件需要在webpack4+才可以使用。首先,我们需要安装 mini-css-extract-plugin:npm install mini-css-extract-plugin,然后配置rules和plugins。文章来源地址https://www.toymoban.com/news/detail-493022.html
module: {
rules: [
{
test: /\.css/i,
// style-lodader -> development
use: [
isProduction ? MiniCssExtractPlugin.loader: "style-loader",
"css-loader"],
},
],
},
plugins: [
// 生产环境
new MiniCssExtractPlugin({
filename: "css/[name].[hash:8].css"
})
]
到了这里,关于04-webpack中使用plugin的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!