本篇文章主要介绍了详解webpack模块化管理和打包工具，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Webpack简介
webpack是当下最热门的前端资源模块化管理和打包工具。 它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际
需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。
模块系统的演进<script>标签
<script src="https://www.jb51.net/module1.js"></script> <script src="https://www.jb51.net/module2.js"></script> <script src="https://www.jb51.net/libraryA.js"></script> <script src="https://www.jb51.net/module3.js"></script>
这是最原始的 JavaScript 文件加载方式，如果把每一个文件看做是一个模块，那么他们的接口通常是暴露在全局作用域下，也就是定义在 window 对象中，
不同模块的接口调用都是一个作用域中，一些复杂的框架，会使用命名空间的概念来组织这些模块的接口，典型的例子如 YUI 库。
这种原始的加载方式暴露了一些显而易见的弊端：
全局作用域下容易造成变量冲突
文件只能按照 <script> 的书写顺序进行加载
开发人员必须主观解决模块和代码库的依赖关系
在大型项目中各种资源难以管理，长期积累的问题导致代码库混乱不堪
CommonJS规范
CommonJS 是以在浏览器环境之外构建 JavaScript 生态系统为目标而产生的项目，比如在服务器和桌面环境中。
CommonJS 规范是为了解决 JavaScript 的作用域问题而定义的模块形式，可以使每个模块它自身的命名空间中执行。该规范的主要内容是，模块必须通过 module.exports 导出对外的变量 或接口，通过 require() 来导入其他模块的输出到当前模块作用域中。
一个直观的例子
// moduleA.js module.exports = function( value ){ return value * 2; } // moduleB.js var multiplyBy2 = require('./moduleA'); var result = multiplyBy2(4);
AMD规范
AMD（异步模块定义）是为浏览器环境设计的，因为 CommonJS 模块系统是同步加载的，当前浏览器环境还没有准备好同步加载模块的条件。
模块通过 define 函数定义在闭包中，格式如下：
define(id?: String, dependencies?: String[], factory: Function|Object);
id 是模块的名字，它是可选的参数。
factory 是最后一个参数，它包裹了模块的具体实现，它是一个函数或者对象。如果是函数，那么它的返回值就是模块的输出接口或值。
一些用例
定义一个名为 myModule 的模块，它依赖 jQuery 模块：
define('myModule', ['jquery'], function($) { // $ 是 jquery 模块的输出 $('body').text('hello world'); }); // 使用 require(['myModule'], function(myModule) {});
注意 ：在 webpack 中，模块名只有局部作用域，在 Require.js 中模块名是全局作用域，可以在全局引用。
定义一个没有 id 值的匿名模块，通常作为应用的启动函数：
define(['jquery'], function($) { $('body').text('hello world'); });
AMD 也采用require()语句加载模块，但不同于CommonJS,他要求两个参数
第一个参数[module]，是一个数组，里面的成员就是要加载的模块； 第二个参数callback，则是加载成功之后的回调函数。如果将前面的代码改写成AMD形式，就是下面这样：
math.add()与math模块加载不是同步的，浏览器不会发生假死。所以很显然，AMD比较适合浏览器环境
目前，主要有两个Javascript库实现了AMD规范： require.js 和 curl.js
require(['math'], function (math) { math.add(2, 3); });
什么是 Webpack
Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
Webpack 的特点
代码拆分
Loader
智能解析
插件系统
快速运行
webpack基本使用
创建项目根目录
初始化
npm init 或 npm init -y
全局安装
npm install webpack -g
局部安装,在项目目录下安装
npm install webpack --save-dev
--save: 将安装的包的信息保存在package中
--dev:开发版本,只是项目构建的时候使用,项目构建完成后并不依赖的文件
如果使用web开发工具,单独安装
npm install webpack-dev-server --save-dev
基本使用
首先创建一个静态页面 index.html 和一个 JS 入口文件 entry.js：