什么是webpack?webpack有什么作用?

想要了解webpack是个什么,首先要知道浏览器在解析js的时候,它有一个盲点就是,没有做到js文件的模块化。比如一个文件要想给另外一个文件暴露出去一部分数据或者一个变量,那只能将它定义在全局的作用域下,没有其他的办法。今天Bluehost主机运营商推荐阅读:《一个虚拟主机最多可以放几个网站》

比如b依赖于c,a依赖于b:

<body>

<script src=“c.js”></script>

<script src=“b.js”></script>

<script src=“a.js”></script>

</body>

这种依赖关系随着项目越来越大、越来越复杂,也会变得复杂,而且依赖链会越来越长。但是最坑的地方每一个依赖里头会暴露出来一个全局变量。这个就不太好了。

(function(){
window.msg =”abc”
})()

新的隐患和解决方案

通过定义全局变量,虽然可以暂时解决依赖的问题,这会带来一个新的隐患。因为在不知情的情况下,不知道在什么时候,以什么样的方式会覆盖掉一个全局变量。如果所有的依赖都是自己去写的,那就比较清楚哪些全局变量,如果引入的是外部的库,这个全局变量就不受控制,因为别人的库也随时可能更新的,可能后面又变了。后面会那很难去绕开这个东西。所以无论用任何方式来定义全局变量,总有一定的可能性发生冲突。这样就很不稳定还没有可行的办法。推荐阅读:《新企业网站为什么应该选择云主机?》

什么是webpack?webpack有什么作用?
什么是webpack?webpack有什么作用?

后面出现了一个node,nodejs可以直接跑在操作系统上。浏览器也可以跑在系统上,但是nodejs有个非常好的机制,就是在node的眼里,所有的文件都是一个模块,任何一个模块都可以有两个口,一个是入水口、一个是出水口,这样一来每个文件只需要管好两个,一个入水口一个出水口。这个就是node里面有个module,其中module.exports表示出水口,module.require表示依赖,表示入水口。

//b.js出水口
var msg =”asd”;
module.exports ={mes:mes}

//a.js入水口
var msg = require(./b.js).msg;//可以省略.js 如:require(./b).msg

require(./b.js).msg明确指明要用b文件里面的msg,exports 指明了要导出去的变量。再也不需要全局变量这样的东西。

webpack它解决的最重要的问题就是这样一个问题,用写后端语言的方式写前端的代码,webpack可以做到动态的把后端的代码变成浏览器能够读懂的代码。即把后端代码前端化。这是最主要的。

至于它打包出来的文件有多丑我们不管,只要它能用,只要它体积小就可以了。

格式:

webpack 入口文件 要输出的文件

webpack a.js bundle.js

这样一来,即做到用后端的方式让代码更加模块化,也能用浏览器来读懂代码。以上就是海外云主机给大家推荐阅读:《云主机是创业公司的好选择吗?》

Add a Comment

您的电子邮箱地址不会被公开。 必填项已用*标注