webpack是什么？为什么要用webpack（一个小白的感想）

2024-06-06 05:07:35

Webpack

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

为什么要用webpack?

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

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

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

c:scss，less等CSS预处理器

…

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

webpack的用处

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

总结

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

webpack是什么？为什么要用webpack（一个小白的感想）相关推荐

(23/24) webpack实战技巧：如何在webpack环境中使用Json
(23/24) webpack实战技巧:如何在webpack环境中使用Json 在webpack1或者webpack2版本中,若想在webpack环境中加载Json文件,则需要加载一个json-loa ...
玩转webpack（一）下篇：webpack的基本架构和构建流程
欢迎大家前往腾讯云社区,获取更多腾讯海量技术实践干货哦~ 作者:QQ会员技术团队接玩转webpack(一)上篇:webpack的基本架构和构建流程文件生成阶段这个阶段的主要内容,是根据 chun ...
vue webpack 自动打开页面_vue中webpack技术详解
1.为什么要使用webpack: 因为我们想把资源整合.如在项目index.html文件中为了请求变得更少我们可以新建一个叫main.js的项目入口文件(里面有引用其它的各种资源,而index.htm ...
webpack 谷歌地图_如何在Webpack中设置可靠且可维护的Google Analytics（分析）
webpack 谷歌地图 One of the messier bits of a new app setup is trying to figure out where to stash your ...
webpack打包压缩混淆_细说webpack系列 3. webpack-cli 零配置打包
大家好!我是萝卜,webpack 4 带来了大量的更新,其中一个就是webpack 4 默认不需要配置文件,下面就带大家体验一下! 初始化项目首先创建项目,创建一个名为webpack的文件夹,进入文 ...
webpack打包优化_如何提升 Webpack 打包速度
背景前段时间在某个项目进行需求开发的时候,该项目是基于 webpack3 进行打包构建的.在开发过程中我发现打包很慢,开发体验不佳,于是做了简单的优化并梳理了优化方案分析打包速度进行优化的第一步 ...
【Webpack】1362- 通过插图来理解webpack
image.png 相信每个前端开发者都听说过webpack.作为前端开发最重要的构建工具,它极大地提高了我们的开发效率. 虽然网上有很多关于Webpack的教程,但由于Webpack本身的复杂性,很 ...
webpack大全---------(基础配置篇)----4.webpack实例三
上一篇:webpack大全---------(基础配置篇)----2.webpack实例二 webpack实例三:讲述代码效验模块eslint.引入第三方模块的处理.图片的打包处理. 第一步:安装配置 ...
php项目webpack打包,利用node.js对webpack打包
本篇文章主要介绍了webpack打包node.js后端项目的方法,现在分享给大家,也给大家做个参考. 本文介绍了webpack打包node.js后端项目的方法,分享给大家,具体如下: 安装依赖npm ...

最新文章

热门文章