web前端开发基础;web前端开发基础 杨春 收藏 0

小白入门总结！前端构建工具Webpack

作者：wenjuanrao，腾讯 PCG 前端开发工程师

最近梳理了下以前 webpack 的相关开发经验，整理和总结了一份入门笔记，欢迎大家围观和批评指正。

随着 web 应用越来越复杂和庞大，前端技术迅猛发展，各路大神各显神通，多种优秀的前端框架、新语言和其他相关技术(如下图所示)不断涌现，这些都极大地提高了我们的开发效率。

前端技术栈

然鹅，我们都知道这些技术都有一个共同点，那就是源代码都无法直接在浏览器上运行。此时，我们就需要通过构建工具将这些代码转换成浏览器可执行的 JS、CSS、HTML。这对前端构建工具有了更高的要求。

历史上也出现了一系列构建工具，一些常见的如下：

常见的构建工具

其中，Webpack 凭借其强大的功能与良好的使用体验，还有有庞大的社区支持，在众多构建工具中脱颖而出成为时下最流行的构建工具。

在言归正传之前，我们先来简单了解一下 webpack。

webpack

根据官网介绍，Webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。

• Entry：入口，指示 Webpack 应该使用哪个模块，来作为构建其内部 依赖图(dependency graph) 的开始。
• Output：输出结果，告诉 Webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。
• Module：模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。
• Chunk：代码块，一个 Chunk 由多个模块组合而成，用于代码合并与分割。
• Loader：模块代码转换器，让 webpack 能够去处理除了 JS、JSON 之外的其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。
• Plugin：扩展插件。在 webpack 运行的生命周期中会广播出许多事件，plugin 可以监听这些事件，在合适的时机通过 webpack 提供的 api 改变输出结果。常见的有：打包优化，资源管理，注入环境变量。
• Mode：模式，告知 webpack 使用相应模式的内置优化
• Browser Compatibility：浏览器兼容性，Webpack 支持所有符合 ES5 标准 的浏览器（IE8 以上版本）

Webpack 的作用非常多，简单列举几点如下：

我们可以通过 loader 和 plugin 机制去进一步扩展能力，按照项目需要去实现个性化的功能。

铺垫了那么多，现在回归主题吧！

Webpack 是由 nodejs 编写的前端资源加载/打包工具，由 nodejs 提供了强大的文件处理，IO 能力。

Loader 和 Plugin 在 Webpack 里是支柱能力。在整个构建流程中，Loader 和 Plugin 对编译结果起着决定性的作用，下面主要讲一下 Webpack 中一些常用的 Loader 和 Plugin。

webpack 中提供了一种处理多种文件格式的机制，这便是 Loader，我们可以把 Loader 当成一个转换器，它可以将某种格式的文件转换成 Wwebpack 支持打包的模块。

在 Webpack 中，一切皆模块，我们常见的 Javascript、CSS、Less、Typescript、Jsx、图片等文件都是模块，不同模块的加载是通过模块加载器来统一管理的，当我们需要使用不同的 Loader 来解析不同类型的文件时，我们可以在 module.rules 字段下配置相关规则。

• loader 本质上是一个函数，output=loader(input) // input 可为工程源文件的字符串，也可是上一个 loader 转化后的结果；
• 第一个 loader 的传入参数只有一个：资源文件(resource file)的内容；
• loader 支持链式调用，webpack 打包时是按照数组从后往前的顺序将资源交给 loader 处理的。
• 支持同步或异步函数。

代码结构通常如下：

babel-loader 基于 babel，用于解析 JavaScript 文件。babel 有丰富的预设和插件，babel 的配置可以直接写到 options 里或者单独写道配置文件里。

Babel 是一个 Javscript 编译器，可以将高级语法(主要是 ECMAScript 2015+ )编译成浏览器支持的低版本语法，它可以帮助你用最新版本的 Javascript 写代码，提高开发效率。

webpack 通过 babel-loader 使用 Babel。

用法：

然后，我们需要建立一个 Babel 配置文件来指定编译的规则。

Babel 配置里的两大核心：插件数组(plugins) 和 预设数组(presets)。

Babel 的预设（preset）可以被看作是一组 Babel 插件的集合，由一系列插件组成。

常用预设：

• @babel/preset-env ES2015+ 语法
• @babel/preset-typescript TypeScript
• @babel/preset-react React
• @babel/preset-flow Flow

插件和预设的执行顺序：

• 插件比预设先执行
• 插件执行顺序是插件数组从前向后执行
• 预设执行顺序是预设数组从后向前执行

webpack 配置代码：

以上 options 参数也可单独写到配置文件里，许多其他工具都有类似的配置文件：ESLint (.eslintrc)、Prettier (.prettierrc)。

配置文件我们一般只需要配置 presets(预设数组) 和 plugins(插件数组) ，其他一般也用不到，代码示例如下：