在开发前端项目时，Web前端初学者需要使用某些工具来管理代码，打包资源等。Webpack 是一个常见的前端资源处理工具，它使用模块打包器的形式来组织前端代码，而在开发过程中，Webpack经常会遇到编译速度过慢的问题。以下是一些解决此问题的方法。
优化 Webpack 配置文件
首先，您可以通过优化 Webpack 配置文件来提升编译速度。我们可以通过以下方法实现此目的：
- 使用 resolve.alias 进行路径解析，可以提高寻找文件的速度;
- 关闭 source map, 这样打包就不再生成 source map 文件，以此来降低生成和写入源代码的成本和时间;
- 控制 entry 的数量和大小，entry 文件应该尽可能地小，并且尽可能少，以缩短编译时间;
- 指定目标环境，可以降低编译过程中的消耗。
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - ------------------
-------------- - -
-------- -
------ -
------ ----------------------- ----------
------------- ----------------------- --------------------
-
--
-------- -------
------ -
---- ----------------------- -----------------
--
------- ------
-------- -
--- ----------------------
-------------- -
--------- -----------------------------
-
--
-
--避免需要编译的文件太多
在 Webpack 中，如果需要编译的文件太多，会导致编译速度变慢。因此，我们建议您只在需要时编译必要的文件。您可以在 module.loaders.include 中指定需要编译的文件路径。
module: {
loaders: [{
test: /\.css$/,
loaders: ['style', 'css'],
include: path.join(__dirname, '../../src')
}]
}使用 HMR 进行热部署
热模块替换（HMR）允许在应用程序运行时更新模块，以减少编译时间。HMR 可以在 Webpack 配置中使用。使用它有助于减少开发时间，因为它可以更新模块而无需重新启动整个应用程序。
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
----- ----------------- - -------------------------------
-------------- - -
------ -
--------------------------------
----------------------- -----------------
--
----- --------------
-------- --------------------
---------- -
------------ -------------------- --------
--------- -----
----- -----
---- ----
--
-------- -
--- -------------------------------------
--- -------------------
--------- -------------------
------ ------- ---------
--
--
------- -
------ -
-
----- -------
-------- ---------------
---- --------------
--
-
----- ---------
-------- ---------------
---- -
- ------- -------------- --
- ------- ------------ -
-
-
-
-
--结论
通过以上优化方法，可以优化 Webpack 编译速度，从而避免在开发模式下编译速度过慢的问题。请记住，在优化时，应尽量将文件分割成最小单元，同时也要使 Webpack 目标环境更明确。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6705f577d91dce0dc8561b2c