vue2 配置文件中增加自定义webpack 插件

最新推荐文章于 2023-04-08 21:14:25 发布

原创

最新推荐文章于 2023-04-08 21:14:25 发布 · 1.2k 阅读

文章标签：

#webpack #javascript #vue.js

本文介绍如何在vue2项目中，通过创建my-plugin.js和修改vue.config.js，来添加并使用自定义的webpack插件。

vue2 配置文件中增加自定义webpack 插件

1. 创建插件my-plugin.js

class MyPlugin {
   
   
  constructor (options) {
   
   
    this.opts = options
  }
  apply (compiler) {
   
   
    let _this

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

苏坡米

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue2项目从0搭建(三):配置环境变量及对应的webpack配置

m0_54741495的博客

11-24

3760

实际业务开发中,一个项目很可能会同时配置好几套环境。比如:常规开发环境,开发测试环境,正式的测试环境,预发测试环境,客户甲的生产环境,客户乙的生产环境,通用生产环境,独立应用环境,微前端环境,大屏专用环境,移动端环境。一女多嫁的实际业务场景,就需要我们进行多样化的环境配置。不同的环境需要有不同的一些标识,也要有一些不同的webpack配置或者资源优化。个人认为这里的知识是十分重要的,因为这里对于工作中实际交付项目或者多客户客制化开发是很重要的。

vue2+webpack搭建h5框架

03-12

vue2+webpack搭建h5框架

参与评论您还未登录，请先登录后发表或查看评论

webpack plugins

weixin_43193877的博客

05-12

1414

前言： plugins：插件在vue项目开发中，通常在vue.config.js中会配置webpack的相关配置其中在plugins中配置相关的插件 plugins:[ new xxx(), // 使用相关插件 new xxx(), ... ] 自定义插件官网介绍核心plugins钩子：compiler 和 compilation 对象理解： Plugin通过访问Compiler和Compilation对象来完成工作。一、 compiler是webpack的入口执行实例，其主要功能是监

Vue2之vue.config.js的webpack配置文件详解

Mr.小灰狼_随笔

02-25

1万+

Vue 之 vue.config.js 的webpack配置文件详解目录一、常用配置项 1、导出模块 2、publicPath 部署应用包的基本Url 3、outputDir 输出文件目录 4、assetsDir 打包后生成的静态资源目录 5、lintOnSave 6、productionSourceMap 生产环境的 source map 7、devServer 8、css相关配置

分享两种vue.config配置webpack插件的方法

wozhenhaokan的博客

04-15

7683

vue.config.js中通过设置configureWebpack来配置webpack插件，configureWebpack有两种形式，一种是对象形式，一种是函数的形式，并且都对生产环境和开发环境做了判断。

Webpack摘抄

weixin_44767973的博客

01-16

2259

webpack的使用及配置

详解vue-cli脚手架中webpack配置方法

12-03

什么是webpack webpack是一个module bundler（模块打包工具），所谓的模块就是在平时的前端开发中，用到一些静态资源，如JavaScript、CSS、图片等文件，webpack就将这些静态资源文件称之为模块 webpack支持AMD和CommonJS，以及其他的一些模块系统，并且兼容多种JS书写规范，可以处理模块间的以来关系，所以具有更强大的JS模块化的功能，它能对静态资源进行统一的管理以及打包发布，在官网中用这张图片介绍：它在很多地方都能替代Grunt和Gulp，因为它能够编译打包CSS，做CSS预处理，对JS的方言进行编译，打包图片，代码压缩等等。所以在我接触了

使用 webpack 插件自动生成 vue 路由文件的方法

12-10

一款自动生成 vue 路由文件的 webpack 插件 vue-route-webpack-plugin 在项目中试点成功了，现在在项目中已经不需要再维护路由配置文件了，由插件自动生成，节省了大家维护路由的时间。从长远来看，使用插件自动生成路由是具有一定好处的。当项目中的路由配置非常多的时候，为了区分业务，你可能需要分成许多个文件来存放这些路由文件，这样就不得不去维护这些路由文件。比如这样的路由文件结构： |-src/ |-router/ index.js childrenRouter.js childrenRouters/ // ...some

详解vue2.0脚手架的webpack 配置文件分析

08-30

本篇文章主要介绍了详解vue2.0脚手架的webpack 配置文件分析，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

vue+webpack中配置ESLint

10-17

主要介绍了vue+webpack中配置ESLint，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

vue2 在图片上打点 自定义图标、大小、颜色，可拖动放大缩小

06-27

源码块

vue项目中运用webpack动态配置打包多种环境域名的方法

10-16

本人分享一个vue项目里，根据命令行输入不同的命令，打包出不同环境域名的方法。需要的朋友跟随小编一起看看吧

浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】

10-16

小编最近为了优化vue项目性能，需要使用webpack-bundle-analyzer插件来分析报文件，在网上没有找到合适的，下面小编给大家写出来一个供大家参考

详解基于Vue cli生成的Vue项目的webpack4升级

08-27

主要介绍了详解基于Vue cli生成的Vue项目的webpack4升级，本文将详细介绍从webpack3到webpack4的升级过程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

自定义webpack3插件plugins

qq_40247562的博客

11-25

1427

之前的老项目有个需求，在用webPack 打包完之后需要复制一份 dist 文件到别到目录；经过查看webpack 文档，发现可以利用 webpack 的生命周期钩子来实现。其中有个钩子为done ,意思为编译完成后执行。此时已经生成了dist 文件，只要再用node 把文件复制一遍即可。官方文档：这是webpack 5 的写法，这是webpack3的写法：在调用done的时候不同版本的写法有差异，搞了很长时间 class donePlugin { apply(compiler)

Vue脚手架配置webpack（configureWebpack，chainWebpack）

coding...

04-08

1万+

Vue CLI 内部的 webpack 配置是通过 webpack-chain 维护的。这个库提供了一个 webpack 原始配置的上层抽象，使其可以定义具名的 loader 规则和具名插件，并有机会在后期进入这些规则并对它们的选项进行修改。在vue.config.js文件下配置webpack，其他的就不说了，主要是configureWebpack以及chainWebpack，两个在文件内是可以同时使用的。选项提供一个对象，该对象将会被 webpack-merge 合并入最终的 webpack 配置。

vue-cli中的chainWebpack和configureWebpack

qq_38352648的博客

03-03

4407

vue-cli中的configureWebpack和chainWebpack使用心得

configureWebpack、chainWebpack配置vue.config.js

vue2 配置文件中增加 自定义webpack 插件

vue2 配置文件中增加 自定义webpack 插件

1. 创建插件my-plugin.js

vue2 配置文件中增加自定义webpack 插件

vue2 配置文件中增加自定义webpack 插件