与webpack类似的工具有哪些？谈谈你为什么选择使用或者放弃webpack？

grunt

自动化，对于需要反复重复的任务，如压缩、编译、单元测试等，自动化工具可以减轻你的劳动，简化你的工作。当你在gruntfile文件正确配置好了任务，任务运行器会自动帮你完成大部分重复的工作。

最老牌的打包工具，它运用配置的思想来写打包脚本，一切皆配置。

优点：出现的比较早

缺点：

• 配置项比较多
• 不同的插件可能会有自己扩展的字段
• 学习成本高，运用的时候需要明白各种插件的配置规则和配置方式

安装

cnpm i grunt grunt-babel @babel/core @babel/preset-env -D

Gruntfile.js

module.exports = function (grunt) {
  // 加载babel任务
  grunt.loadNpmTasks('grunt-babel')
  // 初始化配置文件
  grunt.initConfig({
    babel: {
      options: {
        sourceMap: true,
        presets: ['@babel/preset-env']
      },
      dist: {
        files: {
          'dist/app.js': 'src/app.js'
        }
      }
    }
  })
  // default指的是入口任务
  grunt.registerTask('default', ['babel'])
}

gulp

基于node.js的stream流打包

定位是根据任务流的自动化构建工具

Gulp是通过task对整个开发过程进行构建

优点：

• 流式的写法简单直观
• API简单，代码量少
• 易于学习和使用
• 适合多页面应用开发

缺点：

• 异常处理比较麻烦
• 工作流程顺序难以精细控制
• 不太适合单页面或自定义模块的开发

# 全局安装
cnpm install gulp-cli -g
# 项目中安装
cnpm install gulp gulp-babel @babel/core @babel/preset-env -D
# 创建配置文件
npx -p touch nodetouch gulpfile.js

gulpfile.js

const gulp = require('gulp')
const babel = require('gulp-babel')

function defaultTask(cb) {
  gulp
  .src('src/app.js') // 读取源文件
  .pipe(
    babel({ // 传给babel任务
      presets: ['@babel/preset-env']
    })
  )
  .pipe(gulp.dest('dist')) // 写入dist文件
  cb()
}

exports.default = defaultTask

webpack

• webpack是模块化管理工具和打包工具。通过loader的转换，任何形式的资源都可以视作模块儿。比如commonjs模块、AMD模块es6模块、CSS、图片儿等。它可以将许多松散的模块儿按照依赖和规则，打包成符合生产环境部署的前端资源。
• 还可以将按需加载的模块进行代码分割，等到实际需要的时候再异步加载。
• 它定位是模块打包器，而grunt/gulp属于构建工具。Webpack可以代替Gulp/grunt的一些功能，但不是一个职能的工具。可以配合使用。

优点：

• 可以模块化的打包任何资源。
• 适配任何模块儿的系统。
• 适合spa单页应用的开发。 缺点：
• 学习成本高，配置复杂。
• 通过Babel编译后的js代码打包后体积过道。

安装

cnpm i webpack webpack-cli babel-loader @babel/preset-env @babel/core -D

webpack.config.js

const path = require('path')
module.exports = {
  mode: 'development',
  devtool: false,
  entry: './src/app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        },
        include: path.join(__dirname, 'src'),
        exclude: /node_modules/
      }
    ]
  },
  plugins:[],
  devServer: {}
}

rollup

• rollup下一代es6模块打包工具，最大的亮点是利用es6模块设计，利用吹tree-shaking生成更简洁、更简单的代码。
• 一般而言，对于应用使用Webpack，对于类库使用rollup
• 需要代码拆分或者很多静态资源需要处理，再或者构建的项目需要引入很多CommonJS模块的依赖时，使用Web pack。
• 代码库是基于es六模块，而且希望代码能够被他人直接使用，使用rollup。

优点：

• 使用标准化的格式来写代码，通过减少死代码尽可能的缩小包体积。