认识插件Plugin
Loader用于特定的模块类型进行转换
Plugin可以用于执行更加广泛的任务，比如打包优化，资源管理，环境变量注入
CleanWebpackPlugin
我们每一次改了一些配置的时候都要手动的删除dist文件夹
有一个插件可以帮助我们进行清除，就是CleanWebpackPlugin
先安装：
javascript
npm install clean-webpack-plugin -D进行配置是这样的：
javascript
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进行打包处理
bash
npm install html-webpack-plugin -D
javascript
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的一个模板生成的
这是模板：
javascript
<!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：
javascript
<!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注入的变量了
javascript
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配置
