webpack需要牢记于心的基本概念

1.对webpack的了解

本质上,webpack是一个现代JS应用程序的静态模块打包器(module bundler),将项目作为一个整体,通过一个给定的主文件,webpack将从这个文件找到的项目的所有依赖文件,使用loader处理它们,最后打包成一个或多个浏览器可识别的js文件。

核心概念:

入口(entry):入口起点(entry point)指示webpack应该使用哪个模块,来作为构建其内部依赖的开始。可以在webpack中配置entry属性,来指定一个入口起点或多个入口起点。

输出(output):output属性告诉webpack在哪里输出它所创建的bundles,以及如何命名这些文件,默认值为./dist

加载器(loader):让webpack能够去处理那些非JavaScript文件,因为webpack自身只理解JavaScript

插件(plugins):loader被用于转换某些类型的模块,而插件则可以用于执行范围更广的任务。插件的范围包括从打包优化和压缩,一直到重新定义环境中的变量。

模式(mode):通过选择development(开发)或production(生产),来设置mode参数,可以启用webpack内置的优化。

2.webpack里面的webpack.config.js怎么配置

3.webpack本地开发怎么解决跨域的

下载webpack-dev-server插件;配置webpack.config.js文件

4.如何配置多个入口文件

5.webpack与grunt、gulp的区别

(1)三者都是前端构建工具;
(2)grunt和gulp是基于任务和流的。找到一个或一类文件,对其做一系列链式操作,更新流上的数据,整个链式操作构成了一个任务,多个任务就构成了整个web的构建流程。
(3)webpack是基于入口的。webpack会自动地递归解析入口所需要加载的所有资源文件,然后用不同的loader来处理不同的文件,用plugin来扩展webpack功能。
(4)webpack与前者最大的不同就是支持代码分割,模块化(AMD,CommonsJS,ES6),全局分析。

6.有哪些常见的loader,对应解决哪些问题

css-loader: 加载css,支持模块化、压缩、文件导入等特性;
style-loader: 把CSS文件注入到JavaScript中,通过DOM操作去加载CSS;
slint-loader:通过Slint检查JavaScript代码;
babel-loader: 把ES6转换成ES5;
file-loader: 把文件输出到一个文件夹中,在代码中通过相对URL去引用输出的文件;
url-loader:和file-loader类似,但能在文件很小的情况下以base64的方式把文件内容注入到代码中去;

7.有哪些常见的Plugin,他们是解决什么问题的

define-plugin:定义环境变量;
SplitChunkPlugin:提取公共代码;
MiniCssExtractPlugin:单独生成css文件;
HtmlWepackPlugin:生成html文件;

8.loader和plugin的不同

loader(加载器):webpack将一切文件视为模块,但是webpack原生只能解析js文件,而loader则让webpack拥有了加载和解析非JavaScript文件的能力。loader在module.rules中配置,作为模块的解析规则而存在,类型为数组。
plugin(插件):扩展webpack的功能,让webpack具有更多的灵活性;在plugins中单独配置,类型为数组,每一项是一个plugin的实例,参数通过构造函数传入。

9.webpack的构建流程

(1)初始化参数:从配置文件和shell语句中读取与合并参数,得出最终的参数;
(2)开始编译:用上一步得到的参数初始化compiler对象,加载所有配置的插件,执行对象的run方法开始执行编译;
(3)确定入口:根据配置中的entry找出所有的入口文件;
(4)编译模块:从入口文件出发,调用所有配置的loader文件模块进行翻译,再找出该模块依赖的模块,再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理;
(5)完成模块编译:在经过第(4)步使用loader翻译完所有模块后,得到每个模块被翻译后的最终内容以及它们之间的依赖关系;
(6)输出资源:根据入口和模块之间的依赖关系,组装成一个个包含多个模块的Chunk,再把每个Chunk转换成一个单独的文件加入到输出列表,这一步是可以修改输出文件内容的最后机会;
(7)输出完成:在确定好输出内容后,根据配置确定输出的路径和文件名,把内容写入到文件系统;
在以上过程中,webpack会在特定的时间点广播出特定的事件,插件在监听到感兴趣的事件后会执行特定的逻辑,并且插件可以调用webpack提供的API改变webpack的运行结果。

10.编写loader或plugin的思路

编写loader时要遵循单一原则,每个loader只做一件’转译’工作。每个loader拿到的是源文件的内容(source),可以通过返回值的方式将处理后的内容输出,也可以调用this.callback()方法,将内容返回给webpack。还可以通过this.async()生成一个callback函数,再用这’callback’将处理后的内容输出出去。
相对于loader,plugin的编写就灵活了很多。webpack在运行的生命周期中会广播出许多事件,plugin可以监听这些事件,在合适的时机通过webpack提供的API改变输出结构。

11.webpack的热更新是如何做到的,说明其原理

当对代码进行修改并保存后,webpack将对代码重新打包,并将新的模块发送到浏览器端,浏览器通过新的模块替换旧的模块,这样在不刷新浏览器的前提下就能够对应用进行更新。主要原理是:在启动webpack-dev-server时,sockjs在服务端和浏览器端建立了一个webSocket的长连接,webpack会将sockjs client端的代码打包到输出的html中。

12.如何利用webpack来优化前端性能

(1)压缩代码:删除多余代码、注释、简化代码的写法等方式
(2)利用CDN加速:在构建过程中将引用的静态资源路径修改为CDN上对应的路径
(3)删除死代码(Tree Shaking):将代码中永远不会走到的片段删除掉
(4)优化图片:对于小图可以使用base64的方式写入到文件中
(5)按路由拆分代码,实施按需加载,提取公共代码
(6)给打包出来的文件名添加hash(哈希),实现浏览器缓存文件

13.如何提高wepback的构建速度

(1)利用alias:配置别名可以加快webpack查找模块的速度;
(2)插件CleanWebPackPlugin:清除每次打包时dist目录下的旧版文件;
(3)文件压缩:webpack4只要在生产模式(mode:production)下,代码就会自动压缩;
(4)DllPlugin插件打包第三方类库:对于很长一段时间基本不会再更新的第三方类库,可以使用DllPlugin动态链接库插件,其原理是把网页依赖的基础模块抽离出来打包到dll文件中,当需要导入的模块存在于某个dll中时,这个模块不再被打包,而是去dll中获取;
(5)利用happypack并发执行任务;

14.webpack配置单页面应用与配置多页面应用

单页面应用可以理解为webpack的标准模式,直接在entry中指定单页应用的入口即可;
多页面应用,可以使用webpack的AutoWebPlugin来完成简单自动化的构建,但前提是项目的目录结构必须遵循预设的规范。

15.bundle/chunk/module是什么

bundle是webpack打包出来的文件;
chunk是webpack进行模块的依赖分析时,分割出来的代码块;
module是开发中的单个模块。

未经允许不得转载:专注は互联网 · 用户 · 产品 - 极简 · 生活 · 禅修 » webpack需要牢记于心的基本概念

赞 (0)

扫码打Call!

分享到:更多 ()

留言 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址