写这一系列的文章,本意是想要梳理一下自己凌乱的webpack知识,只是使用过vue-cli,修改过其中的一部分代码,但是对于一个简单项目从0开始搭建webpack的流程和其中的依赖并不是十分清楚。所以写了这样的一系列文章,一方面巩固自己的知识,一方面也可以给小伙伴们一点点入口。但是无奈运气不好,偏偏恰逢webpack4热火朝天的上线了,在webpack3时代的一部分使用方法已经没办法照葫芦画瓢了。所以一边查看文档和github,给大家找到了一些并不是很完美的解决方案。这是这个系列的最后一篇,说一说webpack一些可以优化的地方。也算是给这个系列一个6分的答卷吧。

  先给大家介绍一个webpack自带的小插件,BannerPlugin,我们在前面的文章中说过,webpack自带的插件需要引入webpack,前面已经引入过了,这里就不再重复说明,然后我们只需要在plugins中加上一段代码就可以了:

new webpack.BannerPlugin('author:zaking')

  这样在你打包生成的文件中都会带上你的标记,主要的作用就是在工作中找到这么垃圾的代码是谁写的。

  下面我们来看看如何将静态资源集中打包在一个文件夹下,这样会方便我们的开发和维护。想要将静态资源集中,我们需要一个插件copy-webpack-plugin。

  如何安装和引入就不多说了,直接上代码:

 new copyWebpackPlugin([{
from:__dirname+'/src/public',
to:'./public'
}])

  安装和引入完成之后,在plugins配置中加入如上代码,也就是说从你的src/public目录下的所有文件都会打包到dist/public目录下,那么你现在如果打包的话会有报错,因为你的src下并没有public目录,所以我们新建一个目录,并且把src/images下的图片改个名字放进去,然后在打包就会发现完全没问题了。

  那么下面再说说如何读取json文件,我们偷点懒,直接使用package.json,看看如何读取其中的内容。

  首先,我们在index.html中新建一个div,名为jsonDIV:

<!-- 读取json数据的容器 -->
<div id="jsonDiv"></div>

  然后再main.js中加入一段代码:

//读取json
var json =require('../package.json');
document.getElementById("jsonDiv").innerHTML= json.name;

  然后我们npm run dev一下,就可以看到页面中已经显示了我们的项目名称,说明读取成功。

  回头看了下这篇文章有点短小,但是想来想去实在不知道还有什么可以写在这系列的最后一篇文章中。可能有人会问,怎么webpack这么多的功能你没什么说的了?不是的,而是再说下去也是重复之前说过的,各种loader,各种插件,所以也就不说了。如果大家对webpack更多的功能和用法有兴趣,可以去查看官方文档,那里还是比较详细的。而目前webpack4的发布,使很多小伙伴都迫不及待地想要尝尝鲜,但是webpack3仍旧是当前的主流,而且4的文档并不全面,很多功能如果英文不太好的话还是很难的。所以个人建议大家在工作中没必要使用4。当然,想要课后学习一下是值得肯定的。

  那么最后,非常感谢大家阅读!github代码已经同步更新!

走进webpack(3)-- 小结的更多相关文章

  1. 走进webpack(1)--环境拆分及模块化

    初级的文章和demo已经基本完成了,代码也已经上传到了我的github上,如果你对webpack的使用并不是十分了解,那么建议你回头看下走近系列,里面包括了当前项目中使用频繁的插件,loader的讲解 ...

  2. 走进webpack(2)--第三方框架(类库)的引入及抽离

    在当代的前端开发中,很少会用原生JS来开发页面,最基本的都会使用jQuery来节省我们开发的时间和效率,而angular,vue,react的出现更是为前端开发者带来了福音.那么这篇文章就说说如何用w ...

  3. webpack 学习小结

    webpack 是一个模块打包工具(前提要安装 node使用npm来安装webpack) 1.安装webpack,webpack-cli , webpack-dev-server //全局安装 npm ...

  4. 带你走进webpack世界,成为webpack头号玩家。

    最近朋友圈被<头号玩家>刷爆了,斯皮尔伯格一个资深电影导演,把对过去经典的致敬,对未来的憧憬浓缩在这一部电影中,可以说让观众燃了起来. 观望整个前端开发,不断的演化,发展迅速.前端开发从最 ...

  5. 【前端必会】走进webpack生命周期,另类的学习方法

    背景 webpack构建过程中的hooks都有什么呢?除了在网上看一些文章,还可以通过更直接的办法,结合官方文档快速让你进入webpack的hook世界 写一个入口文件 //index.js cons ...

  6. webpack基础小结。

    想写写webpack的学习体验的小结,加深自己的理解和使用技能,顺便过一下文档(4.0的功能感觉还是满好玩的). 本文主简写描述webpack中对各种文件的简单处理 基本知识点 处理js 加载css文 ...

  7. 一步步从零开始用 webpack 搭建一个大型项目

    开篇 很多人都或多或少使用过 webpack,但是很少有人能够系统的学习 webpack 配置,遇到错误的时候就会一脸懵,不知道从哪查起?性能优化时也不知道能做什么,网上的优化教程是不是符合自己的项目 ...

  8. webpack入门--前端必备

    webpack入门--前端必备 什么是 webpack? webpack是一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来 ...

  9. 小记:vue 及 react 的工程项目入口小结及 webpack 配置多页面应用参考

    一.前言 闲暇时间,看了下前端的基础知识,有幸参与了公司公众号项目前面的一个阶段,学习到了一些前端框架的相关知识 小结了一下 自己练习通过新建一个个文件组织起项目的过程中的一些理解 二.项目入口 vu ...

随机推荐

  1. Caused by: java.lang.ClassNotFoundException: org.springframework.orm.hibernate4.HibernateTemplate

    1.错误描述 严重: Context initialization failed org.springframework.beans.factory.CannotLoadBeanClassExcept ...

  2. RHEL64 缺少ISO 9660图像 安装程序试图挂载映像#1,在硬盘上无法找到该映像

    用光盘安装Linux,很容易,按照提示一步一步就好.如果没有光驱,只好想办法用硬盘或者U盘安装了. 首先说说怎样用U盘启动Linux的安装程序:1.将ISO镜像文件拷贝到U盘中,并解压到U盘根目录.将 ...

  3. Exception in thread "main" java.lang.IllegalArgumentException

    1.错误描述 Exception in thread "main" java.lang.IllegalArgumentException: Cannot format given ...

  4. 原生态的ajax代码

    <script type="text/javascript"> var xmlhttprequest; function GetXmlHttpRequest() { i ...

  5. C#异常处理--C#基础

    try...catch:捕获异常try...finally:清除异常try..catch...finily:处理所有异常 1.捕获异常 using System; using System.Colle ...

  6. 【BZOJ2190】仪仗队(数论)

    [BZOJ2190]仪仗队(数论) 题面 粘链接,题目中有图片 题解 对于题意,可以考虑 如果有\((i,j)\)能够被看见 那么,\((ki,kj)\)就一定不能看见 所以,如果一个点能够被看见,则 ...

  7. [HNOI2013]切糕

    题目描述 网址:https://daniu.luogu.org/problemnew/show/3227 大意: 平面上有一长方体,目标为将其切割为上下两半. 切割点为\((x,y,z)\)的点,每个 ...

  8. 【Spring源码分析】配置文件读取流程

    前言 Spring配置文件读取流程本来是和http://www.cnblogs.com/xrq730/p/6285358.html一文放在一起的,这两天在看Spring自定义标签的时候,感觉对Spri ...

  9. WPF-悬浮窗(类似于360)

    boss要求开发一个类似于360的悬浮窗,如下图所示: 目前采用的是wpf做的客户端,之前有个winform的项目,我参考了下,完成了wpf版的悬浮窗. Height=" WindowSta ...

  10. C# Redis实战(六)

    六.查询数据 在C# Redis实战(五)中介绍了如何删除Redis中数据,本篇将继续介绍Redis中查询的写法. 1.使用Linq匹配关键字查询 using (var redisClient = R ...