webpack的初步理解

最新推荐文章于 2025-03-16 17:18:06 发布

cc_bbs

最新推荐文章于 2025-03-16 17:18:06 发布

阅读量111

点赞数

分类专栏： js成长日记文章标签： node webpack

本文链接：https://blog.youkuaiyun.com/q314235965/article/details/117017938

版权

js成长日记专栏收录该内容

32 篇文章

订阅专栏

最近开始学习node，先简单记录一下自己理解的为什么要有webpack：为了在html里引入单个js

我们在写html的时候，如果想要做一些js处理，一般的做法是写在<script>标签里。

<html>
<head></head>
<body></body>
<script>
    console.log('hello world');
</script>
</html>

当代码量变多的时候，最好将html和js分离。方便分工开发和调试。

<html>
<head></head>
<body></body>
<script src="index.js"></script>
</html>

//index.js
console.log('hello world');
/* one hundred lines */

然后，业务又扩展了，开发人员也增多了。那么最好各自维护自己的代码。然后统一引入。

<html>
<head></head>
<body></body>
<script src="sys1.js"></script>
<script src="sys2.js"></script>
<script src="sys3.js"></script>
</html>

//sys1.js
var value=1;
var sys1={}

//sys2.js
var value=[];
var sys2={}

//sys3.js
var sys3={}

这样随之而来的问题是：因为都在一个全局作用域下，不同文件的代码容易导致命名冲突。比如上图的sys1和sys2就定义了相同的变量。那么最终value为一个数组。

为了保证变量不冲突，各路大神想尽了办法。用命名空间的办法，用函数作用域的办法。但是都不怎么优雅，毕竟还有外部的代码文件。所以webpack就出来解决这个问题。即模块化。

webpack整体包装成一个函数作用域的立即执行函数。用一个对象记录和缓存所有用到的模块。进行优化后输出一个main.js文件。然后html就引用这个main文件即可了。

使用webpack也非常简单

//以下只针对windows系统

//cmd 全局安装webpack
node install webpack -g

//cmd 生成默认node项目
npm init -y
//会生成package.json

//创建目录
package.json
src/
    index.js
    sys1.js
dis/
    index.html

//在js文件里使用require或者import进行引用
//在html文件里src="main.js"

//cmd webpack 打包
npx webpack

//打开index.html进行开心的测试