【webpack 介绍】

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。
当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),
其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。

【webpack 介绍】

 

webpack中有四个核心的概念。 entry、output、loader、plugins。 按照流程这四个概念应该是
入口entry(你要从哪里收拾)
加载loader(开始收拾)
插件plugins(收拾完还觉的不满意就再加点功能)
出口output(收拾整理完之后放哪里)


webpack是一个JS应用打包器, 它将应用中的各个模块打成一个或者多个bundle文件。
借助loaders和plugins,它可以改变、压缩和优化各种各样的文件。输入不同资源,
比如:html、css、js、img、font文件等,然后将它们输出浏览器可以正常解析的文件。

打包工具要解决的问题:
1.文件依赖管理 梳理文件之间的依赖关系
2.资源加载管理 处理文件的加载顺序(先后时机)和文件的加载数量(合并、嵌入、拆分)
3.效率与优化管理 提高开发效率,完成页面优化

webpack的工作步骤如下:
1.从入口文件开始递归地建立一个依赖关系图。
2.把所有文件都转化成模块函数。
3.根据依赖关系,按照配置文件把模块函数分组打包成若干个bundle。
4.通过script标签把打包的bundle注入到html中,通过manifest文件来
管理bundle文件的运行和加载。

打包的规则为:
一个入口文件对应一个bundle。该bundle包括入口文件模块和其依赖的模块。
按需加载的模块或需单独加载的模块则分开打包成其他的bundle。除了这些bundle外,
还有一个特别重要的bundle,就是manifest.bundle.js文件,即webpackBootstrap。
这个manifest文件是最先加载的,负责解析webpack打包的其他bundle文件,使其按要求进行加载和执行。

相关推荐