走进webpack(3)-- 小结

  写这一系列的文章,本意是想要梳理一下自己凌乱的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代码已经同步更新!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏北京马哥教育

Python微信后台开发--环境搭建与接入指南

0x00 背景及介绍 申请一个微信公众平台订阅号,将后台接入到服务器上,验证服务器地址的有效性,实现简单的业务逻辑,根据用户发送不同类型的消息做出不同的反应。 ...

48560
来自专栏Golang语言社区

golang基于redis lua封装的优先级去重队列

前言: 前两天由于某几个厂商的api出问题,导致后台任务大量堆积,又因为我这边任务流系统会重试超时任务,所以导致队列中有大量的重复任务。这时候我们要临时解决两个...

43090
来自专栏不止是前端

Vue:使用webpack搭建MOCK服务器

65180
来自专栏河湾欢儿的专栏

pc移动中常用的meta标签

字符编码:声明文档使用的字符编码 相对于这种方式,更推荐你(推荐使用HTML5的声明方式)。

10950
来自专栏大前端开发

微信小程序之内嵌网页(webview)

微信小程序提供了新的开放能力!它终于开放了在小程序中内嵌HTML页面的功能!从微信小程序基础库1.6.4开始,我们就可以在小程序内放置一个<web-view>组...

46130
来自专栏Golang语言社区

golang基于redis lua封装的优先级去重队列

前言: 前两天由于某几个厂商的api出问题,导致后台任务大量堆积,又因为我这边任务流系统会重试超时任务,所以导致队列中有大量的重复任务。这时候我们要临时解决两个...

363110
来自专栏木头编程 - moTzxx

微信小程序 转发功能实例讲解

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/de...

72730
来自专栏PHP在线

如何通过预加载器提升网页加载速度

预加载器(Pre-loader)可以说是提高浏览器性能最重要的举措。Mozilla 官方发布数据,通过预加载器技术网页的加载性能提升了19%,Chrome测试了...

337100
来自专栏企鹅号快讯

PWA 那些事儿

一、背景 文章 2017 前端大事件和趋势回顾,2018 何去何从?中提到了 2017 年前端值得关注的十大事件,其中就提到了 PWA。 大家都知道 Nativ...

25900
来自专栏一“技”之长

获取iOS应用的URL Schemes 原

3、打开iTunes,查看应用程序,选中相应的应用程序点击右键,选择在Finder中显示,然后解压ipa文件,得到一个文件夹。

10630

扫码关注云+社区

领取腾讯云代金券