前端 node.js 面试-webpack

1、loader是什么，plugin是什么？

webpack只能解析js文件，如果想打包其他文件的话，就会用到loader，比如打包图片、css模块、js模块时 比如： image-loader：加载并且压缩图片文件 babel-loader：把 ES6 转换成 ES5 css-loader：加载 CSS，支持模块化、压缩、文件导入等特性 eslint-loader：通过 ESLint 检查 JavaScript 代码

plugin其实主要是监听一些webpack事件的，然后做优化

Plugin直译为"插件"。Plugin可以扩展webpack的功能，让webpack具有更多的灵活性。 在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。

html-webpack-plugin

mini-css-extract-plugin

terser-webpack-plugin  文件压缩

vconsole-webpack-plugin

assets-retry-webpack-plugin

2.如何在webpack中做些优化

Webpack优化可以分为优化开发体验和优化输出质量两部分，

一： 优化开发体验：

（1） 优化构建速度：

1.webpack-dev-server 模块热更新。

2.通过include缩小文件搜索范围，

3.优化 resolve.modules 配置，指明存放第三方模块的绝对路径，以减少寻找，

（2）优化输出质量

1.提取公共代码 commonsChunkPlugin

2.按需打包 webpackChunkName

3.分离CSS    安装插件：npm install extract-text-webpack-plugin --save

4.使用webpack.optimize.UglifyJsPlugin插件压缩混淆js代码

5.开启tree-shaking 删除没有使用的代码，默认mode = production ，生产环境默认开启tree-shaking功能。

4、路由懒加载

路由懒加载也叫按需加载，即在需要的时候进行加载，单页应用，利用webpack打包后的文件会非常大，造成进入首页时，需要加载的内容过多，时间过长，会出现长时间白屏，而运用懒加载可以将页面进行划分，需要的时候加载页面，减少首页加载用时。

routes: [

    {

      path: "/",

      name: "home",

      component: Home

    },

    {

      path: "/about",

      name: "about",

      component: () => import(/* webpackChunkName: "about" */ "./views/About.vue")

    }

  ]

5、babel编译原理？

badylon将ES6/ES7转换成 AST;

babel-traverse对AST进行遍历转译，得到新的AST;

新AST通过babel-generator转换成ES5。

参考链接