webpack

目录

为什么要使用webpack？

在网页中有哪些常见的静态资源？

网页中引入的静态资源多了以后有什么问题？

如何解决上述两个问题（为什么要使用webpack）：

Webpack是什么？

Webpack中loader的作用/ loader是什么？

常见的loader有哪些？

less-loader:

css-loader:

style-loader:

ts-loader:

Plugin有什么作用？/Plugin是什么

常见的Plugin有哪些

html-webpack-plugin

mini-css-extract-plugin

clean-webpack-plugin

为什么要使用webpack？

在网页中有哪些常见的静态资源？

• Js：
  • .js .jsx .coffee .ts
• Css：
  • .css .less .sass .scss
• Images：
  • .jpg .png .gif .bmp .svg
• 字体文件：
  • .svg .ttf .eot .woff .woff2
• 模板文件：
  • .ejs .jade .vue

网页中引入的静态资源多了以后有什么问题？

• 网页加载速度慢，因为我们要发起很多的二次请求
• 要处理错综复杂的依赖关系，比如引入bootstrap得引入jquery

如何解决上述两个问题（为什么要使用webpack）：

• 合并、压缩、精灵图（雪碧图）、图片的base64编码
• 可以只用之前学过的requireJs、也可以使用webpack可以解决各个包之间的复杂依赖关系
• 比如我们现在经常写一些.less的样式，但是你直接<link rel="stylesheet" src="./index.less">是无效的，因为浏览器并不能识别.less的文件。

完美解决

• 使用webpack，是基于整个项目进行构建的
• 借助于webpack这个前端自动化构建工具，可以完美实现资源的合并、打包、压缩、混淆等诸多功能。

Webpack是什么？

webpack 是一个静态模块打包器（module bundler），在webpack看来,前端所有的资源文件（js/json/css/img/less...）都会作为模块处理，它将根据应用程序需要的各个模块的依赖关系进行静态分析，打包生成对应的静态资源（buddle）。

webpack 是帮我们打包前端资源的，如css,js,图片 字体都是需要http 加载的我们做前端项目的时候有经验 把很多的零碎的js打包在一起 这样我们可以减少http请求，同样我们也希望使用模块化依赖，我们会做很多复用的代码写在一个模块里，而不是每个项目copy一份，到时候有个问题而不是每个项目的去修改一遍。webpack 只支持es5类型的语法 超出这类型之外的时候，需要配置module

 webpack 就像一条生产线,要经过一系列处理流程(loader)后才能将源文件转换成输出结果。 这条生产线上的每个处理流程的职责都是单一的,多个流程之间有存在依赖关系,只有完成当前处理后才能交给下一个流程去处理。
插件就像是一个插入到生产线中的一个功能,在特定的时机对生产线上的资源做处理。 webpack 在运行过程中会广播事件,插件只需要监听它所关心的事件,就能加入到这条生产线中,去改变生产线的运作。

打包过程/构建流程
webpack 的运行流程是一个串行的过程，它的工作流程就是将各个插件串联起来。

命令行执行npx webpack打包命令开始
1.初始化编译参数: 从配置文件和shell命令中读取与合并参数
2.开始编译: 根据上一步得到的参数初始化Compiler对象，加载所有配置的Plugin，执行对象的 run 方法开始执行编译。
3.确定入口: 根据配置中的 entry 找出所有的入口文件
4.编译模块: 从入口文件触发，调用所有配置的Loader对模块进行翻译，再找出该模块依赖的模块，然后递归本步骤直到所有入口依赖的文件都进行翻译。
5.完成模块编译:在经过第4步使用 Loader 翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系图。
6.输出资源：根据依赖关系图，组装成一个个包含多个模块的Chunk，再把每个Chunk转化成一个单独的文件加入到输出列表，根据配置确定输出的路径和文件名，输出。

在以上过程中，Webpack 会在特定的时间点广播出特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑。

Webpack中loader的作用/ loader是什么？

Loader 是webpack中提供了一种处理多种文件格式的机制，因为webpack只认识JS和JSON，所以Loader相当于翻译官，将其他类型资源进行预处理。
用于对模块的"源代码"进行转换。
loader支持链式调用,**调用的顺序是从右往左。**链中的每个loader会处理之前已处理过的资源，最终变为js代码。
可以通过 loader 的预处理函数，为 JavaScript 生态系统提供更多能力。

常见的loader有哪些？

less-loader:

将less文件编译成css文件
开发中，我们常常会使用less预处理器编写css样式，使开发效率提高

css-loader:

将css文件变成commonjs模块加载到js中，模块内容是样式字符串

style-loader:

创建style标签，将js中的样式资源插入标签内，并将标签添加到head中生效

ts-loader:

打包编译Typescript文件

Plugin有什么作用？/Plugin是什么

Plugin功能更强大，主要目的就是解决loader 无法实现的事情，比如打包优化和代码压缩等。
Plugin加载后，在webpack构建的某个时间节点就会触发plugin定义的功能，帮助webpack做一些事情。实现对webpack的功能扩展。

常见的Plugin有哪些

html-webpack-plugin

处理html资源，默认会创建一个空的HTML，自动引入打包输出的所有资源（js/css）， 是提供一个入口类似index.html，自动把所需的js及图片资源引入到html中

mini-css-extract-plugin

打包过后的css在js文件里，该插件可以把css单独抽出来

clean-webpack-plugin

每次打包时候，CleanWebpackPlugin 插件就会自动把上一次打的包删除