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. 模块:
开发者将程序分解成离散功能块,这些功能块称之为模块;
为什么要模块化:因为模块比整个程序有更小的接触面,使得校验、测试、调试更加方便**.**