详解webpack模块化管理和打包工具

本篇文章主要介绍了详解webpack模块化管理和打包工具，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

Webpack简介

webpack是当下最热门的前端资源模块化管理和打包工具。 它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际

需要的时候再异步加载。通过 loader  的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

模块系统的演进<script>标签

<script src="module1.js"></script><script src="module2.js"></script><script src="libraryA.js"></script><script src="module3.js"></script>

这是最原始的 JavaScript 文件加载方式，如果把每一个文件看做是一个模块，那么他们的接口通常是暴露在全局作用域下，也就是定义在 window  对象中，

不同模块的接口调用都是一个作用域中，一些复杂的框架，会使用命名空间的概念来组织这些模块的接口，典型的例子如 YUI  库。

这种原始的加载方式暴露了一些显而易见的弊端：

全局作用域下容易造成变量冲突 文件只能按照   <script>  的书写顺序进行加载 开发人员必须主观解决模块和代码库的依赖关系 在大型项目中各种资源难以管理，长期积累的问题导致代码库混乱不堪

CommonJS规范

CommonJS 是以在浏览器环境之外构建 JavaScript 生态系统为目标而产生的项目，比如在服务器和桌面环境中。

CommonJS 规范是为了解决 JavaScript 的作用域问题而定义的模块形式，可以使每个模块它自身的命名空间中执行。该规范的主要内容是，模块必须通过 module.exports  导出对外的变量 或接口，通过   require()  来导入其他模块的输出到当前模块作用域中。

一个直观的例子

// moduleA.jsmodule.exports = function( value ){  return value * 2;}// moduleB.jsvar multiplyBy2 = require('./moduleA');var result = multiplyBy2(4);

AMD规范

AMD（异步模块定义）是为浏览器环境设计的，因为 CommonJS 模块系统是同步加载的，当前浏览器环境还没有准备好同步加载模块的条件。

模块通过 define  函数定义在闭包中，格式如下：

define(id?: String, dependencies?: String[], factory: Function|Object);

id  是模块的名字，它是可选的参数。

factory  是最后一个参数，它包裹了模块的具体实现，它是一个函数或者对象。如果是函数，那么它的返回值就是模块的输出接口或值。