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配置

相关推荐
web打印社区3 小时前
使用React如何静默打印页面：完整的前端打印解决方案
前端·javascript·vue.js·react.js·pdf·1024程序员节
喜欢踢足球的老罗3 小时前
[特殊字符] PM2 入门实战：从 0 到线上托管 React SPA
前端·react.js·前端框架
小光学长4 小时前
基于Vue的课程达成度分析系统t84pzgwk（程序+源码+数据库+调试部署+开发环境）带论文文档1万字以上，文末可获取，系统界面在最后面。
前端·数据库·vue.js
Baklib梅梅5 小时前
探码科技再获“专精特新”认定：Baklib引领AI内容管理新方向
前端·ruby on rails·前端框架·ruby
南方以南_5 小时前
Chrome开发者工具
前端·chrome
YiHanXii5 小时前
this 输出题
前端·javascript·1024程序员节
楊无好5 小时前
React中ref
前端·react.js
程琬清君5 小时前
vue3 confirm倒计时
前端·1024程序员节
歪歪1005 小时前
在C#中详细介绍一下Visual Studio中如何使用数据可视化工具
开发语言·前端·c#·visual studio code·visual studio·1024程序员节
唔665 小时前
flutter实现web端实现效果
前端·flutter
热门推荐
01BongoCat - 跨平台键盘猫动画工具02GitHub 镜像站点03UV安装并设置国内源04Linux下V2Ray安装配置指南05jdk21下载、安装（Windows、Linux、macOS）06GitLab 零基础入门指南：从安装到项目管理全流程07NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南08KGG转MP3工具|非KGM文件|解密音频09Labelme从安装到标注：零基础完整指南10在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）