前端，通过面试去学习，工程化（webpack、rollup、parcel、tree-shaking、babel）

工程化

什么是前端工程化，个人对前端工程化的理解
引用一篇知乎上的回答 什么是前端工程化？，看看这张图里的内容，巨多…不会的东西太多了
这一篇我只能整理下构建工具的知识点

---

前端工程化发展很快，随着模块化的发展，前端代码需要有构建工具，打包工具，来组织糅合代码，于是出现了grunt、gulp、webpack，grunt没有接触过，一开始接触的是webpack，后来接手了一个较老的项目用的是gulp
包括近些年流行的rollup parcel，还有尤大的vite，前端构建工具越来越多，但是有多少人喜欢配置webpack呢

es6的出现，浏览器的发展速度跟不上js的更新速度，es6代码必须转换成浏览器可识别的es5，所以Babel应运而生

---

WebPack

先来一篇砸场子的，哈哈webpack 为什么这么难用？

webpack4学习笔记

之前学习webpaakc的时候，写过一篇笔记 webpack4学习笔记

webpack的几个核心要点

entry output loader plugin

• entry 入口文件

• output 输出文件

• loader，转译，在modules中配置一些转译规则

• plugin，插件，常用的插件有
  – CleanWebpackPlugin 一定要放在最上面，作用是先删除dist目录再创建新的dist目录。里面的参数为要删除的目录，放在一个数组里面
  – HtmlWebpackPlugin，必备配置，懂得都懂
  – HotModuleReplacementPlugin，热更新插件
  – MiniCssExtractPlugin，提取css成独立文件插件

• 还有一个服务器配置 devServer

//服务器配置
devServer:{
    // contentBase: path.resolve(__dirname,'dist'), //设置项目的基本目录结构
    host: 'localhost', //服务器IP配置
    port: '1990', //端口配置
    open:true,    //自动打开刷新页面
    hot:true,    //开启热更新
    // compress: true //服务器压缩是否开启
}

webpack面试题

常见面试题参考 webpack系列–浅析webpack的原理

webpack打包优化参考 webpack 项目打包优化

Gulp

gulp的话，主要是靠task驱动，gulp所要做的操作都写在gulp.task()中，系统有一个默认的default任务

创建Gulpfile.js

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    uglify = require('gulp-uglify'),
    cssmin = require('gulp-minify-css'),
    clean = require('gulp-clean');

//gulp.task...

具体配置参考 写一份gulp常用配置文件，构建前端工作流

gulp和webpack区别

• gulp：是工具链、构建工具，可以配合各种插件做js压缩，css压缩，less编译 替代手工实现自动化工作
  （1）构建工具
  （2）自动化
  （3）用于：提高效率——能够优化前端工作流程，提高工作效率
  （4）自动刷新页面，雪碧图，压缩css、js，编译less，检查语法等
  （5）使用gulp可以配置你需要的插件，把以前需要手工做的事情让它帮你做了
• webpack：是文件打包工具，可以把项目的各种js文件、css文件等打包合并成一个或多个文件，主要用于模块化方案，预编译模块的方案
  （1）打包工具
  （2）模块化识别
  （3）用于：编译模块代码方案
• 两者不是一个工具，不具有可比性，更不冲突

rollup和parcel

webpack 为处理资源管理和分割代码而生，可以包含任何类型的文件，灵活，插件多
rollup 用标准化的格式（es6）来写代码，通过减少死代码（tree-shaking）尽可能地缩小包体积
parcel 超快的打包速度，多线程在多核上并发编译，不用任何配置

三者对比

• webpack和rollup都需要配config文件，指明entry, output, plugin，transformations
  二者的细微区别在于：
  rollup 有对import/export所做的node polyfills，webpack没有
  rollup支持相对路径，而webpack没有，所以得使用path.resolve/path.join
  两者实现tree-shaking的方式也不一样，这是个面试点，会问到，实现方式，哪个体积更小更彻底，为什么

• parcel则是完全开箱可用的，不用配置

对于应用使用 webpack，对于类库使用 Rollup
如果你需要代码拆分(Code Splitting)，或者你有很多静态资源需要处理，再或者你构建的项目需要引入很多CommonJS模块的依赖，那么 webpack 是个很不错的选择。
如果您的代码库是基于 ES2015 模块的，而且希望你写的代码能够被其他人直接使用，你需要的打包工具可能是 Rollup 。

参考
打包工具比较：webpack VS rollup VS parcel
Webpack vs Rollup
Rollup 与 webpack的区别
Rollup使用
webpack、rollup、parcel优劣？

tree shaking

摇树 直接上链接

浅谈性能优化之Tree Shaking
tree-shaking简单分析
Tree-Shaking性能优化实践 - 原理篇

Babel

babel 到底做了什么？怎么做的？

简单来说把 JavaScript 中 es2015/2016/2017/2046 的新语法转化为 es5，让低端运行环境(如浏览器和 node )能够认识并执行。
babel6到babel7进行了一个大的更新，这一点在学习webpack4的时候采坑了

• babel 7 的一个重大变化，把所有 babel-* 重命名为 @babel/*，例如：
  – babel-cli 变成了 @babel/cli。
  – babel-preset-env 变成了 @babel/preset-env。进一步，还可以省略 preset 而简写为 @babel/env。
  – babel-plugin-transform-arrow-functions 变成了 @babel/plugin-transform-arrow-functions。和 preset 一样，plugin 也可以省略，于是简写为 @babel/transform-arrow-functions。

所以不再讨论babel6

babel在webpack中的配置，截取一段，之一babel和babel-loader的版本对应关系

{
     test:/\.js$/,
     use:[
         {
             //webpack 4.x | babel-loader 8.x | babel 7.x
             //webpack 4.x | babel-loader 7.x | babel 6.x
             loader:'babel-loader',
             options:{    //env针对的是ES的版本，它会自动选择。react针对的就是react
                 presets: ['@babel/preset-env']
             }
         }
     ],
     exclude: /node_modules/,    //不去检查node_modules里的内容，那里的js太多了，会非常慢
     include:path.resolve(__dirname,'src'),    //直接规定查找的范围
 }

学习和配置 参考文章
一口（很长的）气了解 babel
babel7入门 —— 超详细学习笔记

未完待续，持续更新…