Webpack 入门实战：从传统项目到模块化打包与压缩优化

Webpack 入门概述

前言

这是笔者撰写的首篇关于 Webpack 的文章，旨在从基础教程入手，后续将陆续推出更多深入探讨该工具的文章。

那么，Webpack 究竟是什么？如果仅仅将其定义为打包工具，未免低估了其价值。笔者认为，Webpack 是一个集前端自动化、模块化及组件化于一体的可扩展系统。开发者可根据实际需求进行配置与安装，从而实现特定功能并完成最终的打包输出。

作为入门教程，本文将首先介绍 Webpack 最核心的三个功能：代码拆分、打包以及压缩。

传统项目问题与准备

步骤

1.传统项目中的问题

在不依赖任何自动化工具或模块化机制的传统项目中，代码结构通常如下所示：

index.html

<html>
 <head>
 <title>传统项目</title>
 <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
 </head>
 <body>
 <script src="app/index.js"></script>
 </body>
</html>

app/index.js

function main() {
 $('body').html('hello world!');
}
main();

在上述示例中，脚本文件之间存在隐式的依赖关系。

例如，index.js 依赖于在页面运行前已加载的 jQuery，它仅仅假设全局变量 $ 存在。

这种管理 JavaScript 项目的方式存在以下问题：

如果依赖项缺失，或者加载顺序错误，应用程序将无法正常运行。

如果加载了依赖项但未使用，浏览器仍需下载大量不必要的代码，造成资源浪费。

为了解决上述问题，我们需要引入 Webpack 来进行改进。

2.准备

首先，我们需要在项目中安装 Webpack。打开命令行工具，执行以下命令：

mkdir demo && cd demo // 新建demo文件夹并打开
npm init // 初始化npm，生成package.json配置文件
npm install --save-dev webpack@beta // 安装webpack2.0版本，mac系统可能需要添加sudo命令

上述 npm 命令依赖于 Node.js，若未安装，可点击此处进行安装：node.js

为了改进传统项目的不足，我们还需要安装 jQuery：

npm install --save jQuery // 安装jQuery

模块化改造与基础打包

3.改变

修改后的 index.js 代码如下：

var $ = require('jquery');
function main() {
 $('body').html('hello world!');
}
main();

在 index.js 中直接引用 jQuery，明确声明对 jQuery 的依赖，从而消除了隐式依赖问题（避免了全局变量污染）。

修改后的 index.html 代码如下：

<html>
 <head>
 <title>webpack项目</title>
 </head>
 <body>
 <script src="dist/bundle.js"></script>
 </body>
</html>

此时，index.html 仅引入了最终打包生成的 bundle.js。接下来运行 Webpack 命令，将 index.js 输出为 bundle.js。

运行命令：webpack app/index.js dist/bundle.js

webpack app/index.js dist/bundle.js
Hash: 3bb91a6dedfc2a2a1c08
Version: webpack 2.2.0-rc.4
Time: 397ms
 Asset Size Chunks Chunk Names
bundle.js 270 kB 0 [emitted] [big] main
 [0] ./~/jquery/dist/jquery.js 267 kB {0} [built]
 [1] ./app/index.js 83 bytes {0} [built]

最终，在浏览器中打开 index.html 页面，即可看到输出的“hello world!”。

模块拆分与配置文件管理

4.拆分

如果我们需要将 index.js 中的“hello world!”字符串提取到另一个文件 hello.js 中，并在 index.js 中引入使用，这就涉及到了 Webpack 的模块拆分功能。

app/index.js

var $ = require('jquery');
var str = require('./hello.js');
function main() {
 $('body').html(str);
}
main();

app/hello.js

var str = 'hello world!';
module.exports = str;

我们在 hello.js 中通过 module.exports 导出 str 变量，然后在 index.js 中通过 require 导入。这样同样可以实现浏览器中输出“hello world!”的效果。当然，我们需要重新运行 Webpack 命令：webpack app/index.js dist/bundle.js

5.打包

实际上，在上述步骤中我们已经使用了打包命令：

webpack app/index.js dist/bundle.js

其中的 app/index.js 即为打包的入口文件，而 dist/bundle.js 为输出文件。

然而，这种命令行方式不利于复杂项目的配置管理。对于更复杂的配置，我们可以利用配置文件 webpack.config.js 进行统一管理。

我们可以在 demo 文件夹下新建 webpack.config.js 配置文件：

module.exports = {
 entry: './app/index.js',
 output: {
 filename: 'bundle.js',
 path: './dist'
 }
}

上述配置中的 entry 指定了入口文件，支持多个入口；output 指定了 Webpack 打包的输出对象，其中 filename 为输出文件名，path 为输出路径。

如此，我们运行命令行：

webpack --config webpack.config.js

同样可以生成打包目录 dist 及打包文件 bundle.js。

当然，你也可以直接运行简化的命令：

webpack

Webpack 会自动寻找当前目录下的 webpack.config.js 文件。

代码压缩与优化

6.压缩

上一步我们利用 Webpack 命令将多个文件打包到了 bundle.js 中，但并未进行压缩，你可以打开 bundle.js 查看内容。

如果我们需要对打包后的代码进一步压缩处理，可以运行命令：

webpack -p

此时，我们可以对比打包和压缩后的文件大小：

打包命令：webpack

webpack
Hash: ab4a1091f0880100eab0
Version: webpack 2.2.0-rc.4
Time: 387ms
 Asset Size Chunks Chunk Names
bundle.js 270 kB 0 [emitted] [big] main
 [0] ./app/hello.js 50 bytes {0} [built]
 [1] ./~/jquery/dist/jquery.js 267 kB {0} [built]
 [2] ./app/index.js 114 bytes {0} [built]

输出的 bundle.js 整个文件大小为 270 kB。

压缩命令：webpack -p

webpack -p
Hash: ab4a1091f0880100eab0
Version: webpack 2.2.0-rc.4
Time: 1967ms
 Asset Size Chunks Chunk Names
bundle.js 88.3 kB 0 [emitted] main
 [0] ./app/hello.js 50 bytes {0} [built]
 [1] ./~/jquery/dist/jquery.js 267 kB {0} [built]
 [2] ./app/index.js 114 bytes {0} [built]

输出的 bundle.js 整个文件大小为 88.3 kB。

很明显，文件体积被显著压缩了。

7.进一步压缩优化

通过上述 Webpack 的压缩命令，我们已将文件打包并压缩。但对于 webpack -p 压缩后的文件，仍有优化空间。如果你使用的是 Webpack 1.0，可以在配置文件中添加 plugins 配置项，并加入如下插件：

var webpack = require('webpack');
module.exports = {
 ...
 plugins:[
 // 去除代码块内的告警语句
 new webpack.optimize.UglifyJsPlugin({
 compress: {
 warnings: false
 }
 }),
 // 优先考虑使用最多的模块，并为它们分配最小的ID
 new webpack.optimize.OccurenceOrderPlugin()
 ]
 ...
}

而本示例中使用的是 Webpack 2.0 版本，在 2.0 中 UglifyJsPlugin 的 compress 选项默认为 false，且 OccurrenceOrderPlugin 默认启用，因此无需额外配置。

结语

本文主要介绍了 Webpack 入门的一些简单命令和基本配置信息，从代码拆分、打包、压缩的角度与传统前端项目进行对比，希望以此加深大家对 Webpack 基础知识的印象。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持本站！