前端面试题大合集7----模块化/工程化/ES6+标准

一、简述webpack的核心原理

(1)一切皆模块

正如JS文件可以是一个"模块"一样,其它的文件也可视作模块。因此可以执行require(myJsFile.js),亦可执行require(myCssFile.css),这意味着我们可以将事物分割成更小的、易于管理的片段,从而达到重复利用的目的。

(2)按需加载

传统的模块打包工具最终将所有的模块编译并生成一个庞大的bundle.js文件。但是,在真实的APP里,bundle.js文件的大小在10M-15M之间的话,可能会导致应用一直处于加载状态。因此,webpack使用许多特性来分割代码,然后生成多个bundle.js文件,而且异步加载部分代码用于实现按需加载。

二、webpack打包流程

具体流程如下:

  1. 通过entry配置入口文件;
  2. 通过output制定输出文件;
  3. 使用各种loader处理CSS、JavaScript、image等资源,并将它们编译与打包成浏览器可以解析的内容等。
三、webpack中的loader
  • 具体作用:

(1)实现对不同格式文件的处理,比如将scss转换为css,或将TypeScript转化为JavaScript;

(2)可以编译文件,从而使其能够添加到依赖关系中。loader是webpack最重要的部分之一。通过使用不同的loader,我们能够调用外部的脚本或者工具,实现对不同格式文件的处理,loader需要在webpack.config.js里单独用module进行配置。

  • 叙述工作中常用的loader

babel-loader:将下一代的JS语法规范转换成现代浏览器能够支持的语法规范。因为babel有些复杂,所以大多数开发者都会新建一个.babelrc进行配置。

css-loader、style-loader:这两个建议配合使用,用来解析css文件依赖。

less-loader、sass-loader:分别用来解析less文件,sass文件。

file-loader:生成的文件名就是文件内容的MD5散列值,并会保留所引用资源的原始扩展名。

url-loader:功能类似于file-loader,但是当文件大小低于指定的限制时,可以返回一个DateUrl。

四、简述webpack的plugins和loaders有什么区别

(1)作用不同

  • loader直译为「加载器」,作用是让webpack拥有加载和解析非JS文件的能力,是用来加载文件的。
  • plugin直译为「插件」,可以拓展webpack的功能,让webpack具有更多的灵活性。在webpack运行的生命周期中会广播出许多事件,plugin可以监听这些事件,在合适的时机通过webpack提供的API改变输出结果。

(2)用法不同

  • loader在module.rules中配置,也就是说他作为模块的解析规则存在,类型为数组,每一项都是一个Object,里面描述了对于什么类型的文件,使用什么加载和使用的参数。
  • plugin在plugins中单独配置。类型为数组,每一项事宜额plugin的实例,参数都通过构造函数传入。

(3)常见的loader和plugin

  • 常见的loader:

样式:style-loader、css-loader、less-loader、sass-loader等;

文件:raw-loader、file-loader 、url-loader等可以处理资源;

编译:babel-loader(把 ES6 转换成 ES5)、coffee-loader 、ts-loader等;

vue-loader、coffee-loader、babel-loader等可以将特定文件格式转成js模块、将其他语言转化为js语言和编译下一代js语言;

  • 常见的plugin:

内置UglifyJsPlugin:压缩代码,通过UglifyES压缩ES6代码;

内置CommonsChunkPlugin:提取公共代码,提高打包效率,将第三方库和业务代码分开打包;

ProvidePlugin:自动加载模块,代替require和import;

  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery'
  })

html-webpack-plugin:可以根据模板自动生成html代码,并自动引用css和js文件;

extract-text-webpack-plugin:将js文件中引用的样式单独抽离成css文件;

HotModuleReplacementPlugin:热更新插件,修改代码后,自动刷新,实时预览修改后的效果。

五、webpack如何切换开发环境和生产环境

生产环境与开发环境的区别无非就是调用的接口地址、资源存放路径、线上的资源是否需要压缩等方面。目前的做法是在package.json中设置node的一个全局变量,然后在webpack.config.js文件里面进行开发环境与生产环境的配置切换。

相关推荐
web行路人3 分钟前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
超雄代码狂25 分钟前
ajax关于axios库的运用小案例
前端·javascript·ajax
长弓三石33 分钟前
鸿蒙网络编程系列44-仓颉版HttpRequest上传文件示例
前端·网络·华为·harmonyos·鸿蒙
小马哥编程34 分钟前
【前端基础】CSS基础
前端·css
嚣张农民1 小时前
推荐3个实用的760°全景框架
前端·vue.js·程序员
周亚鑫1 小时前
vue3 pdf base64转成文件流打开
前端·javascript·pdf
y5236481 小时前
Javascript监控元素样式变化
开发语言·javascript·ecmascript
Justinc.1 小时前
CSS3新增边框属性(五)
前端·css·css3
neter.asia2 小时前
vue中如何关闭eslint检测?
前端·javascript·vue.js
~甲壳虫2 小时前
说说webpack中常见的Plugin?解决了什么问题?
前端·webpack·node.js