WebPack

痛定思痛。 2022-05-24 23:56 169阅读 0赞 
  1.  现在的前端网页功能丰富，特别是SPA（single page web application 单页应用）技术流行后，JavaScript的复杂度增加和需要一大堆依赖包，还需要解决SCSS，Less……新增样式的扩展写法的编译工作。所以现代化的前端已经完全依赖于WebPack的辅助了。

现在最流行的三个前端框架，可以说和webpack已经紧密相连，框架官方都推出了和自身框架依赖的webpack构建工具。

  • React.js+WebPack
  • Vue.js+WebPack
  • AngluarJS+WebPack

从此可以看出，无论你前端走那条线，你都要有很强的Webpack知识，才能祝你成为这个框架领域的大牛。

什么是WebPack？

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Sass，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。在3.0出现后，Webpack还肩负起了优化项目的责任。

这段话有三个重点：

  • 打包：可以把多个Javascript文件打包成一个文件，减少服务器压力和下载带宽。
  • 转换：把拓展语言转换成为普通的JavaScript，让浏览器顺利运行。
  • 优化：前端变的越来越复杂后，性能也会遇到问题，而WebPack也开始肩负起了优化和提升性能的责任。

我们可以从下图再次了解一下WebPack的作用:

70

发表评论

表情：
评论列表 （有 0 条评论，169人围观）

还没有评论，来说两句吧...

相关阅读

    相关 webpack

    转自：https://github.com/hawx1993/tech-blog/issues/3 背景 在去年年末参与的一个项目中，项目技术栈使用react

    女爷i女爷i/ 0 赞/ 105 阅读

    相关 WebPack

         现在的前端网页功能丰富，特别是SPA（single page web application 单页应用）技术流行后，JavaScript的复杂度增加和需要一大堆依赖包

    痛定思痛。痛定思痛。/ 0 赞/ 170 阅读

    相关 Webpack

    安装webpack 最好本地安装，每个项目需求不同对应webpack版本不一样，可能会打不开。 用 npm install webpack webpack-cli -

    红太狼红太狼/ 0 赞/ 405 阅读

    相关 webpack

    1 webpack是什么？ CommonJS和AMD是用于JavaScript模块管理的两大规范，前者定义的是模块的同步加载，主要用于NodeJS；而后者则是异步加载，通过r

    爱被打了一巴掌爱被打了一巴掌/ 0 赞/ 340 阅读

    相关 webpack

    依赖nodejs 创建一个demo目录 mkdir webpack-demo && cd webpack-demo npm init -y npm install -...

    朱雀朱雀/ 0 赞/ 822 阅读