webpack (一)

发表于

基础概念

模块化

模块化是指将 一个复杂的系统分解为多个模块以方便编码

  1. CommonJS (http://www.commonjs.org)是一种被广泛使用的 JavaScript 模块化规范，其核心思想是通过 require 方法来同步加载依赖的其他模块，通过 module.exports 导 出需要暴露的接口。

    采用 CommonJS 导入及导出的代码如下:

    ​ 导入 const moduleA = require ( ’. / moduleA ’);

    ​ 导出 module .exports = moduleA.someFunc;

  2. AMD (https://en.wikipedia.org/wiki/Asynchronous_module_definition)也是一种 JavaScript模块化规范，与 CommonJS 最大的不同在于，它采用了异步的方式去加载依赖的模块。 AMD规范主 要用于解决针对浏览器环境的模块化问题，最具代表性的实现是requirejs.org)。

  3. ES6 模块化是国际标准化组织 ECMA 提出的 JavaScript 模块化规范，它在 语言层面上实 现了模块化。浏览器厂商和 Node. 都宣布要原生支持该规范 。 它将逐渐取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案 。

    采用 ES6 模块化导入及导出的代码如下:
    //导 入
    import { readFile } from ’ fs ’; import React from ’react’; //导出
    export function hello () {};

    export default {
    ​ // …

    }

常见构建工具

现在我们使用的jsx, scss, less, ts等语言都是无法在浏览器直接运行的, 必须通过转换才可以. 而构建做的就是这件事, 将代码转换成可以直接运行的js, css, html. 包括如下过程: 代码转化, 文件优化(代码压缩, 图片合并), 代码分割(提取公共代码, 首屏代码, 各个模代码), 自动更新(开发是的热更), 代码校验, 自动发布(构建出可直接线上发布的版本)

npm Script

npm 是安装node时附带的包管理工具, npm Script 是 Npm 内置的 一个功能，允许在 package.json 文件 里面使用 scripts 字段定义任务

scripts 字段是一个对象，每个属性对应一段 Shell 脚本。
Npm Script 的优点是内置，无须安装其他依赖 。其缺点是功能太简单，虽然提供 了 pre 和 post 两个钩子，但不能方便地管理多个任务之间的依赖 。

grunt

Grunt有大量现成 的插件封装了常见的任务，也能管理任务之间的依赖关系，自动化地执行依赖的任务 ，每个 任务的具体执行代码和依赖关系写在配置文件 Gruntfile.j s 里

Grunt 的优点是:
• 灵活，它只负 责执行我们定义的任务;
• 大量的可复用插件封装好了常见的构建任务。
Grunt 的缺点是集成度不 高 ，要写很多配置后才可以用，无法做到开箱即用。 Grunt相当于进化版的 NpmScript，它的诞生其实是为了弥补 NpmScript的不足。

glup

Gulp (http://gulpjs.com)是一个基于流的自动化构建工具。除了可以管理和执行任务， 还支持监听文件、读写文件 。

Gulp 被设计得非常简单，只通过下面 5 种方法就可以支持几乎 所有构建场景:

  • 通过 gulp.task注册一个任务;
  • 通过 gulp.run 执行任务;
  • 通过 gulp.watch 监听文件的变化;
  • 通过 gulp.src 读取文件:
  • 通过 gulp.dest 写文件。

Gulp 的优点是好用又不失灵活，既可以单独完成构建，也可以和其他 工具搭配使用 。

缺点和 Grunt 类似，集成度不高，要写很多配置后才可以用，无法做到开箱即用 。

webpack

Webpack(https://webpack.js.org/)是一个打包模块化 JavaScript 的工具，在 Webpack 里一 切文件皆模块，通过 Loader转换文件，通过 Plugin注入钩子，最后输出由多个模块组合成的 文件。

一切文件如 JavaScript、 css、 scss、图片、模板，对于 Webpack来说都是一个个模块， 这样的好处是能清晰地描述各个模块之间的依赖关系，以方便 Webpack 对模块进行组合和打 包。经过 Webpack 的处理，最终会输出浏览器能使用的静态资源。

Webpack 的优 点是 :
• 专注于处理模块 化的项目，能做到开箱即用、 一步 到位:
• 可通过 Plugin 扩展，完整好用又不失灵活 ;
• 使用场景不局限于 Web 开发:
• 社区庞大活跃 ， 经常引 入紧跟时代发展的新特性，能为大多数场景找到已有的开源 扩展:
• 良好的开发体验 。
Webpack 的缺点是只能用于采用模块化开发的项目 。

webpack核心概念

Loader

可以看作具有文件转换功能的翻译员，配置里的 module .rules 数组配置了一 组规则 ， 告诉 Webpack 在遇到哪些文件时使用哪些 Loader 去加载和转换。

Plugin

是用来扩展 Webpack功能的，通过在构建流程里注入钩子实现，它为 Webpack带
来了很大的灵活性。

DevServer

DevServer 会启动一个 HTTP 服务器用于服务网页请求，同时会帮助启动 Webpack，并接收 Webpack 发出的文件更变信号，通过 WebSocket 协议自动刷新网页做到实时预览。

安装

1
npm i -D webpack-dev-server

安装成功后执行 webpack-dev-server 命令， DevServer 就启动了

网页和 DevServer 之间通过 WebSocket 协议通信，以方便 DevServer 主动向客 户端发送命令。 DevServer在收到来自 Webpack 的文件变化通知时，通过注入的客户端控制网页刷新。

Webpack在启动后会从 Entry配置的 Module开始，递归解析 Entry依赖的所有 Module。 每找到一个 Module，就会根据配置的 Loader去找出对应的转换规则，对 Module进行转换后， 再解析出当前 Module 依赖的 Modulea 这些模块会以 Entry为单位进行分组， 一个 Entry 及其 所有依赖的 Module被分到一个组也就是一个 Chunk。最后， Webpack会将所有 Chunk转换成 文件输出。在整个流程中， Webpack会在恰当的时机执行 Plugin里定义的逻辑。

配置

运行机制

简单流程:

​ 初始化配置参数 -> 绑定事件钩子回调 -> 确定Entry逐一遍历 -> 使用loader编译文件 -> 输出文件