Webpack 是一款优秀的 JavaScript 代码模块打包工具，它的出现极大地改善了 Web 前端开发中引入、使用模块的问题。本文将带领大家从入门到掌握这一神器，深入探究它的工作原理并提供相应的示例代码，让你可以灵活自如地使用它来优化前端项目开发。
1. 入门篇
1.1 安装
Webpack 的安装非常简单，只需要使用 npm 或 yarn 即可：
# 使用 npm 安装 npm install webpack webpack-cli --save-dev # 使用 yarn 安装 yarn add webpack webpack-cli --dev
Webpack-cli 是 Webpack 的命令行工具。
1.2 配置
Webpack 的配置文件名字一般为 webpack.config.js。在这个文件里，我们需要配置入口文件和输出文件。例如：
-- -------------------- ---- ------- ----- ---- - --------------- -------------- - - ------ ----------------- ------- - ----- ----------------------- -------- --------- ----------- - -展开代码
这里，我们在 entry 属性中指定了项目的入口文件，output 属性中则指定了输出的路径和打包后的文件名。
1.3 打包
Webpack 的打包非常简单，只需要执行以下命令即可：
npx webpack这个命令会在你的项目根目录下打包出一个名为 bundle.js 的文件，这个文件包含了你的项目所有的 JavaScript 代码。
1.4 loader 和 plugin
在理解了 Webpack 的基本概念之后，我们需要深入研究 loader 和 plugin，这两个东西被认为是 Webpack 非常重要的两个概念。
1.4.1 loader
Webpack 中的 loader 是用来解析和转换文件的。也就是说，loader 可以将文件从一种格式转换成另一种格式，例如将 ES6 语法转换成 ES5 语法，将 SCSS 转换成 CSS 等。
以 Babel 为例，我们可以使用它将 ES6 语法转换成 ES5 语法：
-- -------------------- ---- ------- -------------- - - ------- - ------ - - ----- -------- -- ------- --- ----- ---- - ------- --------------- -------- - -------- --------------------- - - - - - -展开代码
1.4.2 plugin
Webpack 中的 plugin 则是用来扩展 Webpack 的功能的。Plugin 有很多种，常用的有 UglifyJSPlugin、HtmlWebpackPlugin、HotModuleReplacementPlugin 等。
以 HtmlWebpackPlugin 为例，我们可以使用它自动生成 HTML 文件：
const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { plugins: [new HtmlWebpackPlugin()] }
2. 进阶篇
2.1 多入口打包
在实际的项目开发中，我们可能需要打包多个入口文件。Webpack 可以通过配置 entry 来实现多个入口：
-- -------------------- ---- ------- -------------- - - ------ - ---- ----------------- ------ ---------------- -- ------- - ----- ----------------------- -------- --------- ------------------ -- ------ -- ----- ----------- --------- - -展开代码
这样，Webpack 就会将 app.js 和 login.js 两个文件分别打包成 app-hash.js 和 login-hash.js。
2.2 按需加载
在项目开发中，可能存在某些文件很大，首次加载的时间比较长的情况。Webpack 提供了一个方案解决这个问题，就是将这个文件单独打包成一个 chunk，并通过按需加载的方式去获取。
Webpack 提供了一个 import() 方法，可以实现按需加载。以 React 路由为例：
-- -------------------- ---- ------- ------ - ----- -------- - ---- ------- ----- ---- - ------- -- ----------------- ----- ----- - ------- -- ------------------ -------- ----- - ------ - -------- --------- --------------------------------- -------- ------ ----- -------- ---------------- -- ------ ------------- ----------------- -- --------- ----------- --------- - -展开代码
上面的代码中，lazy() 方法会将指定的模块打包成一个 chunk。在使用这个模块时，会自动去请求这个 chunk 并将其加载进来。
2.3 静态资源处理
在我们的项目中，可能存在一些图片、音频、视频等静态资源。Webpack 可以通过配置 url-loader 和 file-loader 来处理这些资源。
-- -------------------- ---- ------- -------------- - - ------- - ------ - - ----- -------------------------------- ---- - - ------- ------------- -------- - -- ------ -------- ------ -- ------ ------ ----- ---------------------------------- - - - -- - ----- -------------------------------------------- ---- - - ------- ------------- -------- - ------ ------ ----- ------------------------------------ - - - -- - ----- --------------------------------- ---- - - ------- ------------- -------- - ------ ------ ----- ----------------------------------- - - - - - - -展开代码
上面的代码中，我们分别配置了三个 loader，分别处理图片、音视频和字体文件。这里，我们将图片小于 10KB 的文件使用 base64 编码，并将文件按照类型分别输出到对应的文件夹中。
3. 结束语
通过本文的学习，我们了解了 Webpack 的基本用法，并深入探究了它的 loader 和 plugin，还学习了如何做到多入口打包、按需加载和静态资源处理。相信读完本文，你已经掌握了 Webpack 的基本技能，可以开始在项目开发中灵活使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/679305bf504e4ea9bd70d6d9
