在前端开发中，webpack 作为一款前端构建工具，已经成为必不可少的资源打包技术之一。它可以将多个文件打包为一个文件，实现代码分离、按需加载等功能，大大提高了前端开发效率。本文将介绍 webpack4 工程的最佳实践，旨在为前端开发者提供深度学习和指导意义。
一、安装和配置
1. 安装
首先，我们需要安装 webpack 和 webpack-cli。可以通过如下的命令进行安装：
npm i webpack webpack-cli -D
2. 配置
webpack4 的配置被拆分成了 webpack.config.js 和 webpack.prod.js 两个文件，可以根据不同的环境单独进行配置。这里我们以开发环境为例，介绍如何进行配置。
在根目录下新建 webpack.config.js 文件，输入如下代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
-------------- - -
----- --------------
------ -----------------
------- -
----- ----------------------- --------
--------- ------------
--
------- -
------ -
-
----- --------
-------- ----------------------------------
---- -----------------
--
-
----- ---------
---- ---------------- --------------
--
--
--
-------- -
--- -------------------
--------- -------------------
--------- -------------
---
--
--其中，常用的配置项有：
entry：入口文件，即 webpack 打包的入口文件路径。output：输出配置，即 webpack 的打包输出路径和打包后的文件名称。module/rules：模块配置，即 webpack 打包过程中需要加载的各种资源文件（例如样式文件、图片文件等）的加载方式。plugins：插件配置，例如生成 HTML 文件、压缩代码等功能。
这里我们使用了 babel-loader 编译 ES6 语法和 style-loader/css-loader 处理 CSS 文件的配置。
二、优化
在配置完成后，我们需要对 webpack 进行优化，以提高打包的效率。下面介绍几个优化的方法：
1. 开启缓存
开启缓存可以避免重复打包，提高打包速度。在 webpack.config.js 文件中添加如下代码：
module.exports = {
// ...
cache: true,
// ...
};2. 压缩代码
在 webpack.prod.js 文件中配置代码压缩，可以减小文件体积，提升页面加载速度。可以使用 terser-webpack-plugin 插件进行代码压缩，具体配置如下：
-- -------------------- ---- -------
----- ------------ - ---------------------------------
-------------- - -
------------- -
--------- -----
---------- -
--- --------------
---------------- ------
-------------- -
--------- -
------------- -----
--
--
---
--
--
--3. 代码分离
通过代码分离，将大文件分割成多个小文件，避免一次性加载过多的资源，从而加快网页的加载速度。可以使用 splitChunksPlugin 插件进行代码分离，具体配置如下：
-- -------------------- ---- -------
-------------- - -
------------- -
------------ -
------------ -
------- -
----- -------------------------
----- ----------
------- ------
--
--
--
--
--4. 首屏加载速度优化
对于一些体积较大、加载时间较长的资源，可以采用懒加载和预加载的方式。懒加载是指在加载页面时仅加载部分资源，随着用户操作或时间推移，再去加载其他的资源，可以使用 import() 函数进行懒加载。预加载是指在页面加载时预先加载一些资源，以便在用户需要时能够立即使用，可以使用 rel="preload" 进行预加载。
import(/* webpackPrefetch: true */ 'login-modal'); <link rel="preload" href="myFont.woff" as="font" type="font/woff2">
三、示例代码
下面是完整的示例代码：
webpack.config.js：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
-------------- - -
----- --------------
------ -----------------
------- -
----- ----------------------- --------
--------- ------------
--
------- -
------ -
-
----- --------
-------- ----------------------------------
---- -----------------
--
-
----- ---------
---- ---------------- --------------
--
--
--
-------- -
--- -------------------
--------- -------------------
--------- -------------
---
--
--webpack.prod.js：
-- -------------------- ---- -------
----- ------------ - ---------------------------------
-------------- - -
------------- -
--------- -----
---------- -
--- --------------
---------------- ------
-------------- -
--------- -
------------- -----
--
--
---
--
------------ -
------------ -
------- -
----- -------------------------
----- ----------
------- ------
--
--
--
--
--结论
通过本文介绍的方式，我们可以对 webpack 的基本配置和优化方法有更深入的了解，实现最佳实践和提升开发效率的目的。希望该文章对前端开发人员有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674bdd72d657e1f70dc207df