Webpack常见的插件和模式
认识插件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 -Dconst 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），这是用来判断当前的环境是开发环境还是生产环境的
mode模式配置
Mode的配置选项可以告知webpack使用相应的内置优化
默认值是production（在什么都不设置的情况下）
可选值有：'none'|'development'|'production';
这几个选项有对应的区别：
Mode的配置代表很多，改了一个mode配置就会对应的改一堆webpack配置
