1. webpack概念：

webpack是一个JavaScript静态模块打包器，他会递归的构建一个依赖关系图，这个关系图中包含应用程序所需要的每个模块，然后将所有这些模块打包成一个或多个bundle。

2. webpack有五个核心概念：

entry、output、loader、plugins、模式.

entry: 指定webpack应该使用哪个模块作为构建其内部关系的开始，进入入口后，webpack会找出有哪些模块是webpack直接或间接依赖的，各个依赖立即被处理，最后输出到名为bundles的文件中。可在entry中配置一个或多个入口，默认的入口起点是：./src。

output: 只是webpack在哪里输出所创建的bundles,以及如何命名这些文件，默认输出文件的目录是./dist.

loader: webpack本身只能理解JavaScript，loader使得webpack可以去处理非JavaScript文件，loader可以将所有类型的文件转换为webpack可以处理的文件，然后就可以利用webpack的打包能力进行处理。

plugins: loader用于转换某些类型的模块，而插件可以用于执行范围更广的任务，插件的应用范围为从打包优化压缩到重新定义环境中的变量，插件功能很强大，可以用于处理各式各样的任务。想要使用plugins，只需要使用require()引入摸个插件，然后在plugins数组中添加该插件选项即可。

模式：通过选择development或是production之中的一个，来设置mode参数，可以启用相应webpack配置下的优化。

3. 入口（entry）:

入口文件不仅可以配置单页面的入口，也可以配置多页面应用程序的入口。

4. 输出（output）:

即使存在多个入口起点，但只指定一个输出配置。

5. mode:

告诉webpack使用相应的内部优化，设置该值将会改变process.env.NODE_ENV,可选值为development和production。

6. loader：

对模块源代码进行转换。loader可以使你在import或加载模块时预处理文件。loader可以将文件从不同的语言转化为JavaScript。

7. plugins:

用于解决loader无法实现的其他事。webpack插件是一个具有apply属性的JavaScript对象，apply属性会被webpack compiler调用，并且compiler对象可在整个生命周期访问。

8. 模块：

开发者将程序分解成离散功能块，这些功能块称之为模块；

为什么要模块化：因为模块比整个程序有更小的接触面，使得校验、测试、调试更加方便.