2021面试总结

1.webpack 如何分离app(应用程序)和vendor(第三方库)入口？

webpack.config.js

module.exports = {
  entry: {
    main: './src/app.js',
    vendor: './src/vendor.js',
  },
};

webpack.prod.js

module.exports = {
  output: {
    filename: '[name].[contenthash].bundle.js',
  },
};

webpack.dev.js

module.exports = {
  output: {
    filename: '[name].bundle.js',
  },
};

说明： 这样配置是想要配置2个单独的入口点， 解决的问题打包时vendor中引入模块打包在一起成为单独的chunk,内容哈希保持不变，这使浏览器可以独立缓存他们，从而减少加载时间。

Tip:

在 webpack < 4 的版本中，通常将 vendor 作为一个单独的入口起点添加到 entry 选项中，以将其编译为一个单独的文件（与 CommonsChunkPlugin 结合使用）。

而在 webpack 4 中不鼓励这样做。而是使用 optimization.splitChunks 选项，将 vendor 和 app(应用程序) 模块分开，并为其创建一个单独的文件。不要 为 vendor 或其他不是执行起点创建 entry。）

webpack常用的用的plugins

• html-webpack-plugin ：根据同一个模板生成多个页面
• extract-text-webpack-plugin
• UglifyJSPlugin ： js压缩插件
• CommonsChunkPlugin ： 把多个页面中公用的文件抽出
• clean-webpack-plugin ： 打包过程前清除以前的文件
• copy-webpack-plugin:

常用loader解析器

• css-loader （解析css文件）
• sass-loader/less-loader/node-sass （预编译解析）
• file-loader/url-loader 解析图片（png，jpg/svg/gif）
• 给css添加前缀： postcss-loader，autoprefixer

loader执行顺序

loader是文件加载器； loader是从右至左调用的

plugin执行

在webpack运行的生命周期中会广播出许多的事件，plugin可以监听这些事件，在合适的时机通过webpack提供的API改变输出的结果；
执行顺序: webpack启动后，在读取配置的过程中会执行new myplugin()初始化一个myplugin获取实例，在初始化compiler对象后，就会通过compiler.plugin监听到webpack广播出来的事件

2.vue data数据中对象内容更改没有触发组件更新

解决方式

// 假设
export default {
  data() {
     return: {
        obj: {
           a: 1,
           b: 2,    
        }
    }
  },
  mounted() {
    this.obj.c = 3 // 这样再插入数据时，对象本身没有改变，也就意味着vue检测不到数据内存指向做更改，导致插入的数据不具备`getter/setter`的属性
    Object.assign(this.obj, { c: 3 }); //这种方式替换一个内存指向完成数据变化
    this.$set(this.obj, "c", "2"); // 通过vue实例提供的$set方法，在不改变指向的同时，添加一个具备getter/setter属性的值
  }，
}

3. vue 动态渲染组件方式

我们之前曾经在一个多标签的界面中使用 is attribute 来切换不同的组件：

 <component v-bind:is="currentTabComponent"></component>

注解： 通过使用保留的 <component> 元素，动态地绑定到它的 is 特性，我们让多个组件可以使用同一个挂载点，并动态切换。根据 v-bind:is="组件名" 中的组件名去自动匹配组件，如果匹配不到则不显示。改变挂载的组件，只需要修改is指令的值即可。

4.高阶函数

函数的参数是函数，或者函数的返回值是函数

5.git的操作

git fatch

git stash