Webpack 静态模块打包工具

自动化构建工具

Webpack 基于模块化打包工具，适用于大型复杂前端项目构建
Grunt
- 基于Node、上手容易、插件齐全、社区活跃
- 早期产物: 每次操作都是文件读写慢、配置相对繁琐
Gulp
- 基于任务运行的工具工作流
- 配置相对简单、基于文件流操作快
Rollup 适用于基础库的打包
Parcel

Webpack v4

Webpack 官网
 Webpack 中文文档

初始化合并参数
run 编译，从 entry 入口，使用 loader 递归编译模块
输出资源，根据入口和 Module 之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每个 Chunk 转换成一个单独的文件 Bundle.

在以上过程中，Webpack 会在特定的时间点广播出特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑，并且插件可以调用 Webpack 提供的 API 改变 Webpack 的运行结果

分别介绍 bundle, chunk, module 是什么？

module是开发中的单个模块，在 webpack 的世界，⼀切皆模块，⼀个模块对应⼀个⽂件，webpack 会从配置的 entry 中递归地构建一个依赖关系图
chunk代码块，⼀个 chunk 由多个模块组成，⽤于代码的合并和分割Code Splitting
bundle包，是由 webpack 打包出来的⽂件

loader 加载模块

让 webpack 拥有了加载和解析非 JavaScript 文件的能力

babel-loader 加载 ES2015+ 代码，然后使用 Babel 转译为 ES5

// npm install -D babel-loader @babel/core @babel/preset-env webpack
module: {
  rules: [
    {
      test: /\.m?js$/,
      include: [resolve('src')],
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader?cacheDirectory=true',
        options: {
          presets: ['@babel/preset-env'],
          plugins: ['@babel/plugin-proposal-object-rest-spread']
        }
      }
    }
  ]
}