01-webpack的理解，解决了什么问题

最新推荐文章于 2024-10-05 17:15:13 发布

敲啊敲9527

最新推荐文章于 2024-10-05 17:15:13 发布

阅读量249

点赞数

分类专栏： webpack系列文章标签： webpack 前端 node.js

本文链接：https://blog.csdn.net/weixin_44423378/article/details/131555604

版权

webpack系列专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Webpack是一个静态模块打包工具，它解决了传统模块化方式的不足，如全局污染和加载控制问题。Webpack通过构建依赖图，实现了按需加载和统一的模块化管理，支持ES6+、TypeScript等高级语法，以及CSS预处理器，提高了开发效率和代码维护性。此外，它还负责代码压缩、合并等优化，适应现代复杂前端项目的需要。

摘要由CSDN通过智能技术生成

一、背景

Webpack 最初的目标是实现前端项目的模块化，旨在更高效地管理和维护项目中的每一个资源

模块化

最早的时候，我们会通过文件划分的形式实现模块化，也就是将每个功能及其相关状态数据各自单独放到不同的JS 文件中

约定每个文件是一个独立的模块，然后再将这些js文件引入到页面，一个script标签对应一个模块，然后调用模块化的成员

<script src="module-a.js"></script>
<script src="module-b.js"></script>

但这种模块弊端十分的明显，模块都是在全局中工作，大量模块成员污染了环境，模块与模块之间并没有依赖关系、维护困难、没有私有空间等问题。

随着项目越来越复杂，上述问题尤其明显

随后，就出现了命名空间方式，规定每个模块只暴露一个全局对象，然后模块的内容都挂载到这个对象中

window.moduleA = {
	method1:function(){
		console.log('我是moduleA的方法method1')	
	}
}

这种方式也并没有解决第一种方式的依赖等问题

再后来，我们使用立即执行函数为模块提供私有空间，通过参数的形式作为依赖声明，如下

// module-a.js
(function ($){
	var name = 'module-a'
	function method1(){
		console.log(name + '#method1')
		$('body').animate({margin:"200px"})
	}
	window.moduleA = {
		method1:method1
	}
})(jQuery)