VUE前端面试题2020前端面试汇总

2020前端面试 - Webpack篇

2020-06-14  本文已影响0人  西巴撸

前言：

2020年是多灾多难的一年，疫情持续至今，到目前，全世界的经济都受到不同程序的影响，各大公司裁员，在这样一片严峻的形式下，找工作更是难上加难。

企业的门槛提高，第一，对于学历的要求，必须学信网可查的统招本科；第二，对于技术的掌握程序，更多的是底层原理，项目经验，等等。

下面是面试几周以来，总结的一些面试中常被问到的题目，还有吸取的一些前辈们分享的贴子，全部系统的罗列出来，希望能够帮到正在面试的人。

Webpack

1. 简介
2. 核心概念

注意：Webpack选择了compose方式，即从右到左执行loader

// 多个入口
module.exports = {
  mode: 'production',
  entry: {
    index: ["./src/index.js"],
    main: ["./src/main.js"]
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name].[hash:8].js'
  },
  module: {
    rules: [{
      test: /\.js$/, // 正则匹配文件名
      exclude: '/node_modules/', // 排除 
      use: ['babel-loader']
    }
  },
  plugins: [ // 插件
    new copyWebpackPlugin([{
      from: path.resolve(__dirname, 'public/static'), 
      to: path.resolve(__dirname, 'dist'),
      ignore: ['index.html']
  }])
}
3. 基本流程
4. 模块打包
<!-- 同步模块 -->
var moduleDepList = [
  {'./moduleA': 1}, // module[0] 的依赖 他依赖moduleA 且 moduleA的下标在moduleList 中 为 1
  {}
]
  
function require(id, parentId) {
  var currentModlueId = parentId !== undefined ? moduleDepList[parentId][id] : id
  var module = {exports: {}}
  var moduleFunc = moduleList[currentModlueId]
  moduleFunc(id => require(id, currentModlueId), module, module.exports)
  return module.exports
}

<!-- 异步模块 -->
var cache = {}

window.__jsonp = function(chunkId, moduleFunc) {
  var chunk = cache[chunkId]
  var resolve = chunk[0]
  var module = {exports: {}}
  moduleFunc(require, module, module.exports)
  resolve(module.exports)
}

require.ensure = function(chunkId, parentId) {
  var currentModlueId = parentId !== undefined ? moduleDepList[parentId][chunkId] : chunkId
  var currentChunk = cache[currentModlueId]

  if (currentChunk === undefined) {
    var $script = document.createElement('script')
    $script.src = `chunk.${chunkId}.js`
    document.body.appendChild($script)

    var promise = new Promise(function(resolve) {
      var chunkCache = [resolve] // 数组形式是为了保存promise
      chunkCache.status = true // 异步模块加载中 如果有别的包 在 异步加载在模块 那么下面的
      cache[chunkId] = chunkCache
    })
    cache[chunkId].push(promise)
    return promise
  }

  if (currentChunk.status) {
    return currentChunk[1] // 这里的promise 这里的就直接返回promise 这样模块只会加载一次
  }
  return currentChunk
}
5. 热更新
{
  "a.js": "a.41231243.js"
}
6. 如何开发一个plugin

tapable 工具，它提供了 webpack 插件接口的支柱

// 一个 JavaScript 命名函数。
function plugin() {};

// 在插件函数的 prototype 上定义一个 `apply` 方法。
plugin.prototype.apply = function(compiler) {
  // 指定一个挂载到 webpack 自身的事件钩子。
  compiler.plugin('webpacksEventHook', function(compilation, callback) {
    callback();
  });
  
  // 使用taptable的写法
  //基本写法
  compiler.hooks.someHook.tap(...)
  //如果希望在entry配置完毕后执行某个功能
  compiler.hooks.entryOption.tap(...)
  //如果希望在生成的资源输出到output指定目录之前执行某个功能
  compiler.hooks.emit.tap(...)
};
7. Compiler和Compliation 对象和钩子
compiler.hooks.compilation.tap('SomePlugin',function(compilation, callback){
    compilation.hooks.someOtherHook.tap('SomeOtherPlugin',function(){
        ....
    })
});
8. 常见plugin
9. 常见loader
10. 常见打包优化
11. 性能优化

概念

1. MVVM
2. 组件化思想
3. 虚拟DOM
4. SPA 和 多页面应用
5. CDN
6. 函数式编程

结束语

2020前端面试就分享到这里，前端就是一个大杂烩，乱炖，需要会的、了解的东西太多了，学无止境，如果发现问题，欢迎评论区指正。

上一篇下一篇

猜你喜欢

热点阅读