webpack

webpack用途

webpack是一个打包器（现代javascript应用程序的静态模块打包器）。

当webpack处理应用程序时，递归的构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将这些模块打包成一个或多个bundle。

四个核心概念

　　1）、入口（entry）

　　2）、输出（output）

　　3）、loader

　　4）、插件（plugins）

1、入口（entry）

入口起点指示webpack应该使用哪个模块来作为构建其内部依赖图的开始；

进入入口起点后，webpack会找出有哪些模块和库是入口起点（直接和间接）依赖的；

每个依赖项随即被处理，最后输出到称之为bundles的文件中。

通过在webpack配置中配置entry属性，可以指定一个或多个入口起点。默认值为./src

单个入口起点

对象语法

 

 

 2.出口（output）

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

3.loader

loader让webpack能够去处理那些非javascript文件（webpack自身只理解JavaScript）

loader可以将所有类型的文件转换为webpack能够处理的有效模块，然后就可以利用webpack的打包能力，对它们进行处理。

本质上，webpack loader将所有类型的文件，转换为应用程序的依赖图（和最终bundle）可以直接引用的模块。

在webpack的配置中，loader有两个目标

　　test属性，用于标识出应该被对应的loader进行转换的某个或某些文件

　　use属性，表示进行转换时，应该使用哪个loader

loader配置在module.rules中

 

4.插件（plugins）

loader被用于转换某些类型的模块，而插件可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。

想要使用一个插件，只需要require（）它，然后把它添加到plugins数组中。

 ////////////////////////////////////////////////////////////

补充：

context

context是webpack编译时的基础目录，入口起点entry会相对于此目录查找。

默认值为当前目录。

context应该配置为绝对路径，假如入口起点为src/main.js,则可以配置

{

　　context:path.resolve('./src),

　　entry:'.main.js'

}

此时 entry 不能再配置为'./src/main.js'，因为 webpack 会相对于 context 配置的 src 目录区查找入口起点（main.js），而 main.js 就在此目录下，所以应当将 entry 配置为当前目录（./）。

context 有什么实际作用？官方文档的解释是使得你的配置独立于工程目录 「This makes your configuration independent from CWD (current working directory)」。怎么理解？举个例子，在分离开发生产配置文件时候，一般把 webpack.config 放到 build 文件夹下，此时 entry 却不用考虑相对于 build 目录来配置，仍然要相对于 context 来配置，这也就是所谓的独立于工程目录。

需要注意的是，output 的配置项和 context 没有关系，但是有些插件的配置项和 context 有关，