解决 Webpack 打包后一直处于 compiling 状态的问题

问题背景

在前端开发中，使用 Webpack 进行打包是非常常见的。但是有些时候，打包会出现一直处于 compiling 的状态，使得开发者无法继续进行开发工作。这个问题一般出现在打包文件比较大或者依赖包引用不正确的情况下。

问题分析

Webpack 在打包过程中有一个 watch 模式，它可以监听文件的变化，当文件发生改变时就会重新打包。默认情况下，Webpack 在 watch 模式下并不会检查每个模块的引用关系，而是包含了所有模块，所以在一些情况下会出现编译异常的情况。

解决方案

1. 增加文件监听数

一种解决方法是增加文件监听数，可以在 webpack.config.js 文件中加入以下代码：

module.exports = {
  watchOptions: {
    ignored: /node_modules/,
    poll: 1000,
  },
};

1. 增加内存大小

另一种方法是增加 Node.js 进程内存大小，在 package.json 文件中增加以下配置：

"build": "NODE_OPTIONS='--max_old_space_size=4096' webpack"

其中，max_old_space_size 是 Node.js 进程的内存上限。在执行打包命令时，将其设为一个比较大的数值即可。

示例代码

-- -------------------- ---- -------
-- -----------------

-------------- - -
  -- - ------
  
  ------------- -
    -------- ---------------
    ----- -----
  -
-
展开代码

// package.json

{
  "scripts": {
    "build": "NODE_OPTIONS='--max_old_space_size=4096' webpack"
  }
}

总结

以上两种方案可以帮助开发者解决 Webpack 打包后一直处于 compiling 的问题。其中，第一种方法是增加文件监听数，第二种方法是增加 Node.js 进程内存大小。根据实际情况可以选择其中一种或者两种方法进行解决。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6494fc0348841e9894245146