webpack基础知识理解

什么是webpack？

webpack是一个打包工具，主要作用就是根据文件的路径，以及在webpack里配置的规则，将源码打包成浏览器可以识别的语言去执行。webpack本身只能打包js文件，为了处理css，less，typeScript等其他非js文件就要结合loader来使用。

webpack打包原理

webpack打包原理是根据文件间的依赖关系对其进行静态分析，将这些模块按指定规则生成静态资源，当webpack处理程序时，它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，将这些模块打包成一个或多个bundle。

webpack有两种组织模块的依赖方式，同步、异步。异步依赖将作为分割点，形成一个新的块；在优化了依赖树之后，每一个异步区块都将作为一个文件被打包。

webpack有一个智能解析器，几乎可以处理任何第三方库。无论它们的模块形式时CommonJS、AMD还是普通的JS文件；甚至在加载依赖的时候，允许使用动态表require("/templates/"+name+"\jade)

webpack核心概念

Entry

入口起点（entry point）指示webpack应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack会找出有哪写模块和库是入口起点（直接和间接）依赖的。每个依赖项随即被处理，最后输出到称之为bundles文件中

Output

output属性告诉webpack在哪里输出它所创建的bundles，以及如何命名这些文件，默认值为./dist。

基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中

Module

模块，在webpack里一切皆模块，一个模块对应着一个文件。webpack会从配置的Entry开始递归找出所有依赖的模块。

Chunk

代码块，一个chunk由多个模块组合而成，用于代码合并与分割

loader

loader让webpack能够去处理那些非JavaScript文件，loader可以将所有类型的文件转化为webpack能够处理的有效模块，然后你就可以利用webpack的打包能力，对它们进行处理，本质上，webpack loader将所有类型的文件，转化为应用程序的依赖图可以直接引用的模块。

• balel-loader：把ES6转化成ES5
• css-loader：加载CSS，支持模块划、压缩、文件导入等特性
• style-loader：把CSS代码注入到JavaScript中，通过DOM操作去加载CSS

Plugin