Webpack4 是目前前端开发中最常用的模块打包工具，它能够将多个模块打包成一个文件，并最大化的减少模块间的依赖，提升应用性能和加载速度。在本文中，我们将手把手地教你如何使用 Webpack4 打造渐进式 web 应用。
安装和配置 Webpack4
在开始使用 Webpack4 之前，我们需要安装和配置它。下面我们来详细介绍。
安装 Webpack4
Webpack4 的安装非常简单，只需要使用 npm 命令即可。打开终端并执行以下命令：
npm install -g webpack webpack-cli
其中 -g 表示全局安装，webpack 和 webpack-cli 表示需要安装的包名。
初始化项目
在安装了 Webpack4 之后，我们需要创建一个新的项目。执行如下命令：
mkdir webpack-demo && cd webpack-demo npm init -y
这会在当前目录下创建一个名为 webpack-demo 的空项目，并自动生成一个 package.json 文件。
创建配置文件
在安装完成并初始化项目之后，我们需要创建 Webpack4 的配置文件。在项目根目录下创建一个名为 webpack.config.js 的文件，并在其中加入以下内容：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
-
--其中 entry 属性表示入口文件路径，output 属性表示打包生成的文件路径和名称。
使用 Webpack4 打包应用
在完成 Webpack4 的安装和配置后，我们可以使用它打包我们的应用。下面我们来一步步实现。
加载 JavaScript 模块
Webpack4 支持通过 require 或 import 语句来加载 JavaScript 模块，我们可以在 src/index.js 中引入其他模块。如下所示：
import { sum } from './math';
console.log(sum(1, 2));其中 math.js 是一个简单的工具模块，可以这样实现：
export function sum(a, b) {
return a + b;
}加载 CSS 文件
除了加载 JavaScript 模块，Webpack4 也支持加载 CSS 文件。可以通过 style-loader 和 css-loader 来加载 CSS 文件。需要先安装这两个包，执行如下命令：
npm install --save-dev style-loader css-loader
然后在 webpack.config.js 中添加如下配置：
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-
----- ---------
---- ---------------- --------------
--
--
--
--现在可以在 index.js 中引入 CSS 文件了：
import './style.css';
加载图片和字体文件
在 Webpack4 中，我们也可以打包加载图片和字体文件。需要使用 file-loader 或 url-loader。需要先安装这两个包，执行如下命令：
npm install --save-dev file-loader url-loader
然后在 webpack.config.js 中添加如下配置：
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-
----- -----------------------
---- ----------------
--
-
----- ------------------------------
---- ----------------
--
--
--
--现在可以在 JS 或 CSS 文件中引用图片和字体文件了：
import icon from './icon.png';
background-image: url('./image.png');使用插件
Webpack4 支持许多插件来优化打包后的代码，例如拆分代码、压缩代码等。我们可以通过调用命令添加插件，例如安装并使用 html-webpack-plugin 插件，执行如下命令：
npm install --save-dev html-webpack-plugin
然后在 webpack.config.js 中添加如下配置：
-- -------------------- ---- -------
----- ----------------- - -------------------------------
-------------- - -
-- ---
-------- -
--- -------------------
------ --------- -----
---
--
--这个插件主要用来自动生成一个 html 文件，该文件引入了打包生成的 JS 文件和其他资源文件。可以通过配置该插件的 options 参数来生成指定的 html 文件。
打包并运行应用
在完成上述的配置之后，我们可以打包我们的应用程序并启动它们。在终端中执行如下命令：
webpack --mode development
其中 --mode development 表示以开发模式运行。
然后在浏览器中打开 http://localhost:8080 即可。
总结
本文介绍了如何安装和配置 Webpack4，以及如何使用它来打包我们的应用。我们还用了一些实际的示例带大家一步步实现整个过程。希望这份指南对你学习 Webpack4 有所帮助，将来能够开发出更高质量、性能更优的 web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/653f50857d4982a6eb8db555