Webpack入门教程（一）：初邂逅

前端要努力QAQ
252 阅读5分钟

1 什么是 webpack？

我们先来看一下官方的解释：

webpack is a static module bundler for modern JavaScript applications.

webpack 是一个静态的模块化打包工具，为现代的 JavaScript 应用程序。

这句话的意思是什么呢？我们尝试对每一个词进行解释:

  1. 静态的static：这样表述的原因是我们最终可以将代码打包成最终的静态资源(部署到静态服务器，比如html、图片、js文件等等);
  2. 打包bundler：打包是指将多个模块或文件合并为一个或多个输出文件的过程。webpack可以帮助我们进行打包，所以它是一个打包工具。
  3. 模块化module：webpack默认支持各种模块化开发，ES Module、CommonJS、AMD等;
  4. 现代的modern：因为现代前端开发面临各种各样的问题，才催生了webpack的出现和发展;

image.png

上面是 webpack 官网的一张图片，我觉得已经能非常形象的体现 webpack 的功能了。左侧是我们要打包的模块依赖，中间的盒子就是webpack，它最终会将这些模块打包成一个个静态资源（js文件、css文件、图片资源等等）

PS：如果以后再有人问你 webpack 是什么的话，你应该能很清楚地回答给他了吧。

2 为什么会有 webpack?

要回答为什么会有 webpack，我们需要从前端构建历史的角度来看。在早期的前端开发中，由于浏览器不支持模块化，开发者往往需要手动引用多个 JavaScript 文件，并且这些 JavaScript 文件之间可能存在依赖关系，因此难以管理和维护。为了解决这个问题，出现了一些工具，如 Grunt、Gulp 等，它们可以通过配置文件自动化地完成一些重复性工作，如压缩、合并、语法检查等。然而，这些工具对于模块化的支持并不是很好。

随着前端开发的不断发展，模块化的需求越来越迫切。为了解决模块化问题，CommonJS 规范和 AMD 规范相继出现。CommonJS 规范是 Node.js 采用的模块化方案，而 AMD 规范则是 RequireJS 采用的模块化方案。这些模块化方案使得前端开发者可以按照模块化的方式编写代码，但是它们需要额外的工具来处理模块之间的依赖关系和打包输出。为了解决这个问题，就出现了像 Browserify、RequireJS 等打包工具，它们可以将多个模块打包成一个文件，同时也提供了对其他资源的处理，如CSS、图片等。

然而，这些打包工具对于复杂项目的支持还是不够完善，所以 webpack 应运而生。webpack 号称是一个静态模块打包工具，它可以将多个 JavaScript 文件打包成一个文件，并且支持各种资源的打包，如CSS、图片等。同时，它还支持代码的按需加载，从而提高了应用程序的性能。webpack 还提供了丰富的插件和 loader 来满足各种项目的需要。因此，webpack 成为了现代前端开发中最重要的构建工具之一。

image.png

综上所述，webpack 的出现是为了解决前端开发中的模块化问题和构建工具的不足，也是前端构建工具发展历程中的必然结果。

3 webpack 初体验

在了解了什么是 webpack以及为什么会有 webpack 之后，就让我们来用webpack构建一个最简单的前端项目吧。

  1. 首先我们创建一个目录，初始化 npm，然后 在本地安装 webpack，接着安装 webpack-cli（注意：此工具用于在命令行中运行 webpack）：
mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev
  1. 现在，我们将创建以下目录结构、文件和内容：

image.png

add.js：

export function add(n1, n2) {
  return n1 + n2;
}

sub.js

export function sub(n1, n2) {
  return n1 - n2;
}

index.js

import { add } from "./add";
import { sub } from "./sub";

console.log(add(1, 1));
console.log(sub(1, 1));

可以看到，我们做的仅仅定义了两个工具文件 add.js 和 sub.js，并在 index.js 中导入并且调用了两个函数。

  1. 接着，我们执行 npx webpack 命令进行打包，打包结果如下图所示：

image.png

image.png

可以这样说，执行 npx webpack，webpack 默认会将我们的脚本 src/index.js 作为 入口起点，也会生成 dist/main.js 作为 输出。

npx 是Node 8.2/npm 5.2.0 以上版本提供的一个命令，它主要有以下两个作用：1. 在不全局安装包的情况下运行包：比如我们可以通过npx create-react-app react-app命令来运行 cra 工具，而无需先在系统上全局安装。2. 运行本地项目中的依赖：比如 npx webpack 命令就会执行本地项目的 webpack 依赖而非全局（./node_modules/.bin/webpack）

在 webpack v4 中，可以无须任何配置，然而大多数项目会需要很复杂的设置，这比在 terminal(终端) 中手动输入大量命令要高效的多，所以让我们创建一个配置文件：

  1. 创建 webpack-demo/webpack.config.js
const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
};
  1. 执行打包命令 npx webpack --config webpack.config.js。

image.png

可以看到生成的新的文件名为 bundle.js 说明我们的配置文件已经生效。

事实上，如果 webpack.config.js 存在，则 webpack 命令将默认选择使用它，所以我们依然可以使用 npx webpack 进行打包。这里使用 --config 选项只是表明可以传递任何名称的配置文件，这对于需要拆分成多个文件的复杂配置是非常有用的。

  1. npm script

另外，考虑到用 CLI 这种方式来运行本地的 webpack 副本并不是特别方便，我们可以设置一个快捷方式。调整 package.json 文件，添加一个 npm script：

 "build": "webpack"

现在，我们就可以使用 npm run build 命令，来替代我们之前使用的 npx 命令。注意，使用 npm scripts，我们可以像使用 npx 那样通过模块名引用本地安装的 npm packages。这是大多数基于 npm 的项目遵循的标准，因为它允许所有贡献者使用同一组通用脚本。

至此，我们就完成了一个最简单的 webpack 打包的示例。是不是感觉很简单？

下面我们就来正式介绍一下 webpack 的一些核心概念吧。

avatar
文章
阅读
粉丝