webpack

Posted 2020-09-03 半夏微澜ぺ

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文件在加载方式，如果每一个javascript文件看做是一个模块的话,那么他们的接口是暴露在全局作用域下，也就是定义在window对象下，不同的模块调用都是在同一个作用域中，一些复杂的框架会使用命名空间的概念来组织这些模块的接口；

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

1 全局作用域下容易造成命名冲突

2 文件只能按照javascript的顺序进行加载

3 开发人员必须主观的解决模块与代码库的依赖关系

4  在大型项目中资源难以管理，长期积累的问题导致代码库混乱不堪

webpack的特点

Webpack和其他模块化工具有什么区别？

代码拆分

Webpack有两种组织模块依赖的方式。同步和异步。异步依赖作为分割点，形成一个新的块。在优化了依赖树后，每一个异步快斗作为一个文件进行打包。

loader

Webpack本身只能处理原生的javascript模块，但是loader转换器可以将各种类型的资源转换成javascript模块，这样，任何的资源都可以成为Webpack可以处理的模块

智能分析

Webpack是一个智能分析器，几乎可以处理任何第三方库，无论他们的模块形式是CommonJS、AMD还是普通的JS文件，甚至在加载依赖的时候，允许使用动态表达式require（"./templates/"+name+".jade"）.

插件系统

Webpack还有一个功能丰富的插件系统。大多数内容工呢过都是基于这个插件系统运行的。还可以开发和使用开源的Webpack插件，开满足各式各样的需求。

快速运行

Webpack 使用异步I/O和多级缓存提高运行效率，这使得Webpack能够以令人难以置信的速度快速增量编译。

安装

首先安装node.js,node.js自带了软件包管理器npm，Webpack需要Node.js v0.6以上支持，建议使用最新版本的Node.js

用npm 安装Wekpack：

      $ npm install webpack -g      

此时的Webpack已经安装到了全局环境下，可以通过命令行webpack -h试试。通常我们会把Webpack安装到项目的依赖中，这样就可以使用项目本地版本的Webpack

1 进入项目目录

2 确定已经有package.json,没有就通过nom init 创建

3 安装Webpack 依赖

4        npm install webpack --save-dev      

查看Webpack的版本信息

    npm info webpack    

安装指定版本的webpack

    npm install [email protected] --save-dev    

如果需要webpack的开发工具，要单独安装：

   npm install webpack-dev-server --save-dev