webpack实现的效果

问题描述

问 题

看了半天webpack的实现技术，还是不明白webpack是要将前端资源合并成什么样，才是项目需要的？
是js和css完全合并？还是js、css分别合并？哪些要合并，哪些不要合并，为什么要合并，合并有啥好处，合并有啥弊端？？？

解决方案

如果我们有一个网站，这个网站有10个页面，但是我们不要写10个html，而只写1个html，所有另外那9个html都是用javascript生成的，如果我们写了9个javascript，在第1个html里引用，这样会产生9次http请求，所以我们应该把它们合并成1个js文件，这样加载起来会比较快。但是如果你把9个js文件写成1个大的js文件的话，会难以管理，所以写的时候还是分别写成9个，只是在最后的时候让webpack把它们合并起来。而且在写这9个js的时候，我们觉得ES5已经过时了，至少应该用ES6甚至ES7，但是目前的浏览器还不支持ES6，所以需要用babel把ES6转换成 ES5，这样我们就有两件事情了，一件是合并，一件是转换，分开来做太麻烦，所以告诉webpack每次都自动帮我们做这两件事情。而且合并之后的js太大了，里面有很多给人看的空格和换行以及注释什么的，最后把这些都去掉，这样又可以节省一部分空间，所以每次发布时还需要丑化uglify一下，所以这就是三件事情，webpack可以帮你自动一次性完成这三件事情。每次改完代码还需要刷新浏览器页面太麻烦了，所以还需要启动一个webpack server，它会自动建立一个websocket连接，在你改完代码后自动通知浏览器更新，所以webpack又能再多做一件事情。

这篇关于webpack实现的效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！