Vue学习笔记之Webpack的plugin的应用_vue webpack-shell-plugin-程序员宅基地

技术标签: Vue  vue.js  

1、概念:插件,它是对webpack本身的扩展,是一个扩展器,让webpack变得更加好用。

2、版权声明插件:BannerPlugin,但这个是webpack是自带的,所以可以不需要进行安装,在项目配置文件直接引用一下即可:const webpack = require(‘webpack’)

然后重新打包项目,在生成的js文件中增加一行版权申明:

3、打包HTML的插件:我们的目录结构中,index.html文件是在项目的根目录下的,在打包文件dist中是没有这个文件的,所以我们需要将index.html文件打包到dist文件夹中,此时就可以使用HTMLWebpackPlugin插件,此插件可以自动生成一个index.html文件(可以指定模板来生成),同时将打包的js文件,自动通过script标签插入到body中(所以原来的index.html中的引用bundle.js的代码就可以删除了,打包的时候会自定将js文件引入进去)。

安装此插件:cnpm install [email protected] --save-dev

配置插件:先导入包,然后再使用此插件:

重新编译运行代码,在dist打包文件夹中自动产生一个index.html文件:

但是打包生成的index.html文件中与原来在根目录下的index.html文件中的少了一个

<div id="app"></div> 的引用,同时bundle.js的目录其实也不需要前面的 dist/ 这个目录了。

所以,我们可以在打包的时候,指定模板来生成正index.html文件:

原文件(可以将引用bundle.js的代码注释掉):

自动增加dist路径的,可以在配置中去掉此配置:

同时,指定此文件为打包生成新文件的模板:

重新打包运行:

4、对js文件压缩(丑化js文件)插件:uglifyjs,对文件中一些空格、简化名称较长的变量等方式来压缩js文件的大小。

压缩插件的环境安装:cnpm install [email protected] --save-dev

配置文件:

原来的bundle.js文件:

通过压缩后的js文件:这样减少了不少文件大小。

 

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/zeng_sily/article/details/108437800

智能推荐

揭开均线系统的神秘面纱_揭开极限编程的神秘面纱,重新探讨“ XP蒸馏”,第2部分...-程序员宅基地

文章浏览阅读496次。存档日期:2019年5月15日 | 首次发布:2002年9月10日 在本月的Demystifying Extreme Programming中 ,Roy Miller解释了成为XP团队的程序员意味着什么,以及六个程序员的实践如何特别适合这种情况。 虽然所有19种XP实践都很重要,但程序员实践对于团队开发软件至关重要 。 此内容不再被更新或维护。 全文以PDF格式“按原样”提供。 随着技..._解开均线系统的神秘面纱

centos7.5开启ssh服务-程序员宅基地

文章浏览阅读5k次,点赞2次,收藏15次。1,查看是否已安装openssh-server;指令:rpm -qa | grep ssh2,如果未安装,请先安装openssh-serveryum install openssh-server3,编辑ssh参数:vim /etc/ssh/sshd_config修改端口号允许root登录设置需要密码登录修改好后输入“:wqa”保存退出4,开启ss..._centos7.5开启ssh

【2020-11-02】分享一个爬虫小工具,提高你的工作效率_trillworks-程序员宅基地

文章浏览阅读1.2k次,点赞4次,收藏7次。文章目录前言二、地址https://curl.trillworks.com/三、用法3.1这里以有道翻译为例,右键链接>copy>copy as curl(bash)3.2 黏贴到上面的网站,右侧方框会自动填充requests请求总结前言我们在编写爬虫代码的时候,都需要去请求链接,有事还需要一连串的参数,这时候我们是不可能一个一个手打上去的,这次就分享一个快速解析请求的小工具二、地址https://curl.trillworks.com/三、用法3.1这里以有道翻译为例,右键._trillworks

C++——多项式拟合_c++ 多项式拟合-程序员宅基地

文章浏览阅读1.5w次,点赞16次,收藏88次。 C++——多项式拟合目标:利用C++对txt或者xml中的数据,进行高阶或低阶多项式拟合 为方便以后查找,代码以及详细资料已打包,并上传至云盘(链接:https://pan.baidu.com/s/1bvUBIoxv7Avxeq_Cz6xOZQ 密码:u9qe)打包的内容如下: ..._c++ 多项式拟合

农产品:菜鸟、京东、顺丰们争夺冷链物流的新战场?-程序员宅基地

文章浏览阅读204次。互联网时代,一切都有了新玩法。以吃为例,从古至今中国人对“吃”的热爱都没有变过,在现今如何吃的健康、营养为国人新追求,有机蔬菜、无农药水果成为时下新宠。同时,随着国内物流体系的完善,运输技术的提高,农产品正成为新风口。就在今年3月1日,由国家发改委牵头、24部委联合发布的《关于推动物流高质量发展促进形成强大国内市场的意见》中明确指出,要加强农产品物流骨干网络和冷链物流体系建设,发展如“生鲜电..._顺丰冷链物流基础设施落后

Android Studio项目结构详解_andriodstudio的构建在哪-程序员宅基地

文章浏览阅读6.8k次,点赞8次,收藏67次。Android Studio 是谷歌推出的一个Android集成开发工具,基于IntelliJ IDEA. 类似 Eclipse ADT,Android Studio 提供了集成的 Android 开发工具用于开发和调试。在IDEA的基础上,Android Studio 提供: 1.基于Gradle的构建支持。 2.Android 专属的重构和快速修复。 3. 提示工具以捕获性能、可用性、版本兼容性等问题。 4.支持ProGuard和应用签名。 5.基于模板的向导来生成常用的Android_andriodstudio的构建在哪

随便推点

Android性能优化工具_android 性能优化工具-程序员宅基地

文章浏览阅读1.4k次,点赞2次,收藏7次。CPU 性能分析器可以在APP运行时,实时检查应用的 CPU 使用率和线程活动,也可以检查记录的方法轨迹、函数轨迹和系统轨迹的详情。(1)Sample JAVA Methods不能采集耗时很短的方法,而Trace JAVA Methods可以采集耗时很短的方法;_android 性能优化工具

大学实训_软件毕设_Java入门实战_商场管理系统_Punrain_java为超市设计管理系统-程序员宅基地

文章浏览阅读5.2k次,点赞8次,收藏41次。需要 演示文档+数据库涉及+需求分析文档和完整源码的,可通过该链接下载https://download.csdn.net/download/Punrain/11980745_java为超市设计管理系统

Runtime-iOS运行时应用篇_initwithframe runtime拦截-程序员宅基地

文章浏览阅读151次。在上篇文章iOS运行时Runtime基础后,本篇将会总结Rutime的具体应用实例,结合其动态特性,Runtime在开发中的应用大致分为以下几个方面:Runtime应用.png相关文章:iOS运行时Runtime基础一、动态方法交换:Method Swizzling实现动态方法交换(Method Swizzling )是Runtime中最具盛名的应用场景,其原理是:通过Runtime获取到方法实现的地址,进而动态交换两个方法的功能。使用到关键方法如下://获取类方法的M.._initwithframe runtime拦截

2020-08-14_20200814_112325010.jpg-程序员宅基地

文章浏览阅读65次。SpringMvc解决跨域问题前言:弄的一个Mvc项目涉及到了跨域问题,以下是我整理的一些解决方法介绍: 跨站 HTTP 请求(Cross-site HTTP request)是指发起请求的资源所在域不同于该请求所指向资源所在的域的 HTTP 请求。比如说,域名A(http://xusong.example)的某 Web 应用程序中通过标签引入了域名B(http://xusong.foo)站点的某图片资源(http://xusong.foo/image.jpg),域名A的那 Web 应用会使浏览器发_20200814_112325010.jpg

阿里云不同账户下的ecs服务器迁移教程_阿里云两个账户的服务器能不能做镜像迁移-程序员宅基地

文章浏览阅读565次。服务器已购买并创建系统盘的情况下只能同步系统盘,数据盘无法同步。系统盘还未创建的可以同步系统盘和数据盘。4、镜像共享给你要迁移的阿里云服务器的账号上,不是登录账号,是账号ID(个人中心->安全设置->账号ID)3、使用最新的快照生成镜像,镜像是分区域的,华南一只能用华南一的镜像。4、在接收镜像的账号里查看镜像,注意选择正确的区域。2、要迁移的实例创建镜像,创建镜像基于快照。5、创建实例,选择镜像,还是要注意区域。1、先停机维护要迁移的服务器。6、选择共享镜像,更换即可。5、新服务器更换系统盘。_阿里云两个账户的服务器能不能做镜像迁移

Fluka 安装及 pydicom_安装 fluka 2023 g11-程序员宅基地

文章浏览阅读1.3k次。Fluka 安装及 pydicom 准备工作1. Fluka安装及配置2.Flair的安装3. Geoviewer的安装3.1 GeoViewer命令安装3.2 flair-geoviewer-x.x.x.src.rpm安装3.3 其他问题4. Rocks Centos6 安装Fluka 2.6版本出错问题5. 安装pydicom, numpy.6. Centos pip安装准备工作Fluka安装相对简单。首先下载Fluka,Flair,Geoviewer最新版本。例如:fluka-2011.2c_安装 fluka 2023 g11

推荐文章

热门文章

相关标签