什么是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