webpack是什么?为什么要用webpack(一个小白的感想)

Webpack

WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。
当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。

为什么要用webpack?

如今很多网页其实可以看做是功能丰富的应用,它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度,前端社区涌现出了很多好的实践方法

a:模块化,让我们可以把复杂的程序细化为小的文件;

b:类似于TypeScript这种在JavaScript基础上拓展的开发语言:使我们能够实现目前版本的JavaScript不能直接使用的特性,并且之后还能能装换为JavaScript文件使浏览器可以识别;

c:scss,less等CSS预处理器

这些改进确实大大的提高了我们的开发效率,但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常繁琐的,这就为WebPack类的工具的出现提供了需求。

webpack的用处

  1. webpack可以根据模板生成HTML,并自动处理上面的css/js引用路径。
  2. webpack可以自动处理<img>里面的图片路径,css里面背景图的路径,字体引用
  3. webpack可以开启本地服务器,一边改写代码,一边自动更新页面内容
  4. webpack可以编译jsx es6 sass less coffescript等,并添加md5、sourcemap等辅助
  5. webpack可以异步加载内容,不需要时不加载到DOM
  6. webpack可以配合vue.jsreact.js等框架开发。

总结

最近在学习Vue.js相关内容,对于模块化和组件有了一定的认识,而webpack对于这种组件化,模块化的东西,我认为可以说是“恰到好处”。
由于Less和Sass的编译、ES6到ES5的编译,同时还具备模块化开发和组件式开发等优点。在目前流行的前端框架React和Vue中也得到很好的支持。
对于一个简单的webpack打包,详见博客Vue前端工程化(babel && webpack打包)
webpack是什么?为什么要用webpack(一个小白的感想)