webpack之路-1

webpack做了什么

前期的前端开发对于各种功能独立的js文件都是抽离导一个js文件中，在使用是都是通过script变迁引用导html文档中

// a.js
var a = 1
function b() {}


// b.js
var c =1
function d(){}


// index.html
<script src="./a.js"></script>
<script src="./b.js"></script>
console.log(a)
console.log(b)

这种形式的代码往往会造成变量命名的冲突和污染  同时也会造成只要数据一修改  全部的数据就会被修改

到后来慢慢发展为 

// a.js
window.a={
 var a = 1
 function b() {}
}



// b.js
window.b = {
 var c =1
 function d(){}
}


// index.html
<script src="./a.js"></script>
<script src="./b.js"></script>
console.log(a)
console.log(b)

 这种在全局对象上挂载各自对象 对象内部是独立的私有变量和方法虽然很大程度上避免的命名冲突和全局变量的污染  但是还是会造成修改其中的值   其余的值也会被修改

基于上面的原因  诞生了commonjs  amd  cmd和es6 modules等模块化的导入导出

问题1：现阶段对前端的用户体验和性能要求越来越高  项目越大 js css 等文件就越来越多 越少的http请求就越有必要

问题2：从es3 到现在的es6 es7...越来越多的规范 但不是所有的浏览器都对新的语法支持

问题3：项目中除了js、css和图片外，肯定还会有ts、less、sass...等浏览器不识别的代码，所以有必要将他们编译为浏览器识别的js、css等

所以webpack就解决了上面三个问题