webpack-基本概念篇

前言：

webpack是一种流行的js应用的打包工具。当webpack处理你的应用时，它会递归的形成一个你的应用需要所有模块的依赖图（从entry开始），然后将这些模块打包成一个包或者是多个包。

模块：

提到模块就不得不提一下模块化编程，模块化编程是一种软件设计技术，它强调将程序的功能拆分成独立的可替换的模块，每个模块有负责程序的某个功能的一切，每个模块有一个接口方便验证，调试和测试（一个好的模块需要实体抽象和封装边界，以便模块可以有连贯的设计和明确的目的在整个程序中）。

node.js在开始产生的时候就支持模块化的编程，但是前端（web）的模块支持还未实现。支持前端技术模块化开发的工具存在都有一定的优势和局限。webpack就是在这些工具的基础上产生的新一代。

与node.js单调的模块调用方式不同，webpack支持多种模块引用方法：

1.ES5的 import;

2.common.js的 require()；

3.AMD的 define 和 require；

4.css/less/sass 支持的@import；

5.属性中的url 和src

支持的模块类型有：

webpack支持多种开发语言和预处理器，loaders.Loaders向webpack解释如何将这些模块打包，webpack社区已经创建了loaders为多种开发语言和预处理器：

CoffeeScript

TypeScript

ESNext (Babel)

Sass

Less

Stylus

基本使用：

1.首先引入webpack模块：

npm install webpack

2.命令行运行

webpack --config webpack配置文件的路径

3.编写webpack的配置文件

1.webpack的配置文件是一个抛出一个对象的js文件，这个对象的 options是之后webpack进行处理时的依据；

2.webpack是一个标准的node.jsCommonJS模块,所以可以通过

require('')来引入文件，使用npm模块，使用js控制流？：，定义 常量变量，使用函数生成配置的一部分；（适当使用这些特性）

3.尽量满足以下行为：

写自己的命令行来代替webpack的命令行；

使用相同的输出文件；

可以用多个配置文件来代替一个长的配置文件；

配置文件的名称在team里要有一致性；

entry:

entry指出了webpack形成模块依赖图时的入口文件（你可以根据你的应用的需要提供一个或者多个入口文件）。

output:

output告诉webpack如何命名文件（output.filename）并且在哪里输出打包好的文件（output.path）。

# 我们经常看到的emit和emitted是discharged和produced术语。

loaders:

plugins:

插件的使用方法比loader更加广泛和功能强大（从包优化缩小一直到全局变量）。插件使用之前要先require，由于插件的使用是定制化的，所以你可以在一个配置文件里多次形成插件的多个实例。