走进webpack（3）- 小结「建议收藏」

走进webpack（3）– 小结「建议收藏」

全栈程序员-用户IM • 2022年3月25日下午12:35 • 未分类

大家好，又见面了，我是你们的朋友全栈君。

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

发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/124433.html原文链接：https://javaforall.cn

【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛

【官方授权正版激活】： 官方授权正版激活支持Jetbrains家族下所有IDE 使用个人JB账号...