当前位置：首页 > web >正文

Webpack常见的插件和模式

web 2025/6/29 21:53:38

认识插件Plugin

Loader用于特定的模块类型进行转换

Plugin可以用于执行更加广泛的任务，比如打包优化，资源管理，环境变量注入

CleanWebpackPlugin

我们每一次改了一些配置的时候都要手动的删除dist文件夹

有一个插件可以帮助我们进行清除，就是CleanWebpackPlugin

先安装：

npm install clean-webpack-plugin -D

进行配置是这样的：

const path = require('path');
const { VueLoaderPlugin } = require('vue-loader/dist/index');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');module.exports = {// 设置打包的模式mode: 'development',// 设置入口文件entry: './src/main.js',// 设置输出output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist'),// assetModuleFilename: 'abc.png'},resolve:{extensions:[".js",".json",".vue",".jsx",".tsx"],alias:{utils:path.resolve(__dirname,"./src/utils")}},// 配置模块规则module: {rules: [{test: /\.css$/,use: ["style-loader", "css-loader", "postcss-loader"]},{test: /\.less$/,use:[ "style-loader","css-loader","less-loader"]},{test:/\.(png|jpe?g|svg|gif)$/,type: 'asset/resource',//打包两张图片，并且这两张图,//将图片进行base64的编码，并且直接编码后的源码放到打包的js文件中//type:"asset/inline"parser:{dataUrlCondition:{maxSize: 60 * 1024}},generator:{//不写死，使用占位符//name:指向原来的图片名称//ext：扩展名//hash:webpack生成的hash值filename:"img/[name]_[hash:8][ext]"}},{test:/\.js$/,use:[{loader:"babel-loader",options:{plugins:["@babel/plugin-transform-arrow-functions",]}}]},{test:/\.vue$/,loader:"vue-loader"}]},plugins:[new VueLoaderPlugin(),new CleanWebpackPlugin()]
};

HtmlWebpackPlugin

还有一个不太规范的地方

我们的HTML文件是编写在根目录下的，最终打包的dist文件夹中是没有index.html文件的

在进行项目的部署时，必然是需要有对应的入口文件index.html

所以需要对index.html进行打包处理

npm install html-webpack-plugin -D

const path = require('path');
const { VueLoaderPlugin } = require('vue-loader/dist/index');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {// 设置打包的模式mode: 'development',// 设置入口文件entry: './src/main.js',// 设置输出output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist'),// assetModuleFilename: 'abc.png'},resolve:{extensions:[".js",".json",".vue",".jsx",".tsx"],alias:{utils:path.resolve(__dirname,"./src/utils")}},// 配置模块规则module: {rules: [{test: /\.css$/,use: ["style-loader", "css-loader", "postcss-loader"]},{test: /\.less$/,use:[ "style-loader","css-loader","less-loader"]},{test:/\.(png|jpe?g|svg|gif)$/,type: 'asset/resource',//打包两张图片，并且这两张图,//将图片进行base64的编码，并且直接编码后的源码放到打包的js文件中//type:"asset/inline"parser:{dataUrlCondition:{maxSize: 60 * 1024}},generator:{//不写死，使用占位符//name:指向原来的图片名称//ext：扩展名//hash:webpack生成的hash值filename:"img/[name]_[hash:8][ext]"}},{test:/\.js$/,use:[{loader:"babel-loader",options:{plugins:["@babel/plugin-transform-arrow-functions",]}}]},{test:/\.vue$/,loader:"vue-loader"}]},plugins:[new VueLoaderPlugin(),new CleanWebpackPlugin(),new HtmlWebpackPlugin({title:"vue3",template:"./src/index.html"}),]
};

该文件中自动添加了我们打包的bundle.js文件

这个文件是如何生成的呢？

默认情况下是根据ejs的一个模板生成的

这是模板：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body><div id="app"></div>
</body>
</html>

在html-webpack-plugin的源码中，有一个default index.ejs的模块

可以自定义HTML模板

template是指定我们要使用的模块所在的路径

title是在进行html/WebpackPlugin.options.title读取时就会读到该信息

配置完之后生成的index.html：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>我的标题</title>
<script defer src="bundle.js"></script></head>
<body><div id="app"></div>
</body>
</html>

DefinePlugin的介绍

模块中使用BASE_URL的常量

在编译template模板的时候，有一个BASE_URL

DefinePlugin允许在编译时创建配置的全局常量，是一个webpack的内置的插件（不要单独安装）

BASE_URL配置时候的值是会被当成JS代码执行的，如果想要表示字符串需要再加一个单引号

在项目的js代码中就可以使用通过DefinePlugin注入的变量了

const path = require('path');
const { VueLoaderPlugin } = require('vue-loader/dist/index');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {DefinePlugin} = require("webpack")module.exports = {// 设置打包的模式mode: 'development',// 设置入口文件entry: './src/main.js',// 设置输出output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist'),// assetModuleFilename: 'abc.png'},resolve:{extensions:[".js",".json",".vue",".jsx",".tsx"],alias:{utils:path.resolve(__dirname,"./src/utils")}},// 配置模块规则module: {rules: [{test: /\.css$/,use: ["style-loader", "css-loader", "postcss-loader"]},{test: /\.less$/,use:[ "style-loader","css-loader","less-loader"]},{test:/\.(png|jpe?g|svg|gif)$/,type: 'asset/resource',//打包两张图片，并且这两张图,//将图片进行base64的编码，并且直接编码后的源码放到打包的js文件中//type:"asset/inline"parser:{dataUrlCondition:{maxSize: 60 * 1024}},generator:{//不写死，使用占位符//name:指向原来的图片名称//ext：扩展名//hash:webpack生成的hash值filename:"img/[name]_[hash:8][ext]"}},{test:/\.js$/,use:[{loader:"babel-loader",options:{plugins:["@babel/plugin-transform-arrow-functions",]}}]},{test:/\.vue$/,loader:"vue-loader"}]},plugins:[new VueLoaderPlugin(),new CleanWebpackPlugin(),new HtmlWebpackPlugin({title:"我的标题",template:"./src/index.html"}),new DefinePlugin({BASE_URL:"'./'",coderwhy:"'why'",counter:"123"})]
};

而DefinePlugin里面默认也注入了一个变量也可以直接使用（process.env.NODE_ENV），这是用来判断当前的环境是开发环境还是生产环境的