webpack定义
webpack 是一个现代 JavaScript 应用程序的静态模块打包器,当 webpack 处理应用程序时,会递归构建一个依赖关系图,其中包含应用程序需要的每个模块,然后将这些模块打包成一个或多个 bundle。
作用
- 转译代码(
ES 6转为ES 5,SCSS转为CSS) - 构建
build - 代码压缩
- 代码分析
核心概念
entry: 入口output: 输出loader: 模块转换器,用于把模块原内容按照需求转换成新内容- 插件(
plugins): 扩展插件,在webpack构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要做的事情
Loader VS Plugin
-
loader的功能就是加载资源到webpack。loader可以将文件从不同的语言(如TypeScript)转换为JavaScript,或将内联图像转换为data URL。loader甚至允许你直接在JavaScript模块中import CSS文件! 因为webpack本身只能处理JavaScript,如果要处理其他类型的文件,就需要使用loader进行转换,loader本身就是一个函数,接受源文件为参数,返回转换的结果。 -
Plugin是用来扩展Webpack功能的。它直接作用于webpack,扩展了它的功能。当然loader也时变相的扩展了webpack,但是它只专注于转化文件(transform)这一个领域。而plugin的功能更加的丰富,而不仅局限于资源的加载。 -
loader通常是1对1,把1个文件打包形成另外一个文件。plugin是1对n个文件,把多个文件打包合成一个文件。