Webpack常见的插件和模式

贩卖纯净水.2025-06-10 13:15

认识插件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配置

相关推荐
moddy3 分钟前
新人怎么去做低代码，并且去使用？
前端
风清云淡_A4 分钟前
【Flutter3.8x】flutter从入门到实战基础教程(五):Material Icons图标的使用
前端·flutter
安心不心安9 分钟前
React ahooks——副作用类hooks之useThrottleEffect
前端·react.js·前端框架
jstart千语10 分钟前
【vue】创建响应式数据ref和reactive的区别
前端·javascript·vue.js
肖师叔爱抽风17 分钟前
使用nvm use切换版本时出现虚假成功信息，使用nvm ls，实际显示没有切换成功，解决方法
前端
猩猩程序员19 分钟前
Rust为什么需要Borrow Trait
前端
BUG收容所所长20 分钟前
Zustand状态管理如何驱动低代码平台的数据流？
前端·javascript·设计
司宸23 分钟前
学习笔记十四 —— 嵌套JSON树结构 实现模糊匹配返回搜索路径
前端
盗德24 分钟前
Vue渲染引擎的范式革命：从虚拟DOM到Vapor模式
前端·vue.js
BUG收容所所长25 分钟前
React递归渲染与react-dnd——低代码平台的组件拖拽与动态渲染实践
前端·javascript·设计
热门推荐
01Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code02全球最强模型Grok4，国内已可免费使用！（附教程）03VMware Workstation Pro虚拟机的下载和安装图文保姆级教程(附下载链接)04MSPM0G3507——读取引脚的高低电平方法（数字信号循迹模块）05KGG转MP3工具|非KGM文件|解密音频06UV安装并设置国内源07腾讯还是太全面了，限时免费！超全CodeBuddy IDE保姆级教程！（附案例）08Coze 开源了，送上保姆级私有化部署方案【建议收藏】092025电赛e题：openmv识别过程丢失矩形10扣子开源本地部署教程 丨Coze智能体小白喂饭级指南