webpack 挂在“95% 发射”/“95% 发射”答案

【问题标题】：webpack hangs at on "95% emit" / "95% emitting"webpack 挂在“95% 发射”/“95% 发射”
【发布时间】：2016-12-29 08:50:06
【问题描述】：

This is my production webpack config。标题中的两个引号分别指的是 webpack2 和 webpack。两者都为我挂起类似的错误。

这是我触发构建的命令

set NODE_ENV=production && webpack --config config/webpack.config.prod.js --progress --display-error-details

我错过了什么？

这是运行 npm run pack 后的输出，与我的生产 webpack 构建相关：

$ npm run pack

> somedir@ pack C:\somedir
> set NODE_ENV=production && webpack --config config/webpack.config.prod.js --progress --display-error-details
                           95% emitting

【问题讨论】：

错误信息会很有帮助。
没有错误信息，webpack 挂在 "95% emitting" :,)
用一些控制台输出更新了我的答案
定义“挂起”？你离开它多久了？您期望的输出文件有多大？你在使用 SourceMaps 吗？你在使用像 Uglify 这样的缩小器吗？
这将是运行节点 6.3 --inspect 标志并在开发工具中运行堆快照的好情况。

标签： javascript node.js ecmascript-6 webpack webpack-2

【解决方案1】：

我遇到了同样的问题。我在<div> 上错过了结束>。

Webpack (mix) 会挂起，而不是无法编译，我不知道为什么。希望这可以为某人节省几个小时进入错误的兔子洞。

【讨论】：

【解决方案2】：

在我的例子中，它是在 output.path 中定义的目录。删除它的内容（不同的文件夹和不同的包）后，一切都恢复了。

【讨论】：

【解决方案3】：

如果您使用indexTransform 属性并且函数抛出错误，也会发生这种情况。要处理这个问题，您可以将函数包装在 try/catch 中；

module.exports = (targetOptions, indexHtml) => {
  try {
    ...
  } catch (error) {
    console.error(error)
    process.exit(1) // Kills webpack
  }
}

【讨论】：

【解决方案4】：

我在设置项目时在 Angular 中遇到了同样的问题。问题是我错误地将 index.html 文件放在了./src 文件夹之外。

【讨论】：

【解决方案5】：

我在复制 index.html 时有错误点击（从 angular 文件夹中剪切这个文件）。将它们复制回来后问题就消失了。

【讨论】：

【解决方案6】：

运行 ng build 和 node --inspect node_modules/webpack/bin/webpack.js 应该会给出问题路径的输出

【讨论】：

【解决方案7】：

我通过升级到`webpack@4.41.2` 修复了

【讨论】：

【解决方案8】：

如果您的导入无效，也会出现此错误。从其他未编译的文件导入引用。

【讨论】：

【解决方案9】：

在我的情况下（Windows 环境和 laravel-mix）路径中没有任何不正确的字符，因为即使是死的简单配置也不起作用。只是 webpack (webpack@3.12.0) 自己做了一些愚蠢的事情，问题已经使用publicPath 选项解决了，如下所示：

mix.options({
    publicPath: ('./')
});

根据documentation：

允许您为应用程序中的所有资产指定基本路径

您也可以使用：

mix.setPublicPath('./');

【讨论】：

【解决方案10】：

我使用 laravel-mix 作为独立。这是我的配置：

let mix = require('laravel-mix');

mix.setPublicPath('./')
   .js('resources/js/app.js', 'js')
   .sass('resources/sass/app.scss', 'css');

这对我有用。

【讨论】：

【解决方案11】：

npm rebuild node-sass

由我解决。

【讨论】：

【解决方案12】：

就我而言，我尝试使用 Angular 4、Webpack 3、AOT 和延迟加载。
使用 @ngtools/webpack 和 AotPlugin 使其冻结在 95%。

修复的是：
1）。用npm install node-sass --no-bin-links 安装node-sass，因为它不是用sass-loader 自动安装的。
2）。为 SCSS/CSS 文件添加这些加载器（甚至在节点模块内）：

        {
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader'
            ]
        },
        {
            test: /\.scss$/,
            use: [
                'raw-loader',
                'sass-loader'
            ]
        }

【讨论】：

【解决方案13】：

所以我想通了。原来我在输出路径中包含了reserved characters。我从opened an issue on github开始。

在 output.path webpack 中使用无效或保留字符时将挂起，没有输出。使用 --progress 标志运行将显示它挂在 95% emit(ting) 上（后缀取决于 webpack 版本）。

【讨论】：

感谢您的指点，为了弄清楚这一点，我运行了node --inspect node_modules/webpack/bin/webpack.js，然后在 chrome 中打开了允许我调试代码的输出 URL。然后我看到它卡在mkdirp 中，因此在该节点模块的函数中添加了console.log，以查看触发无限循环的路径。对我来说，问题是像c:\path\to\output\c:\source\file 这样的路径，并且由于冒号而引发了错误。
这里有同样的问题，但我的根本原因是一个 SASS 文件触发了缺少变量错误，webpack 将其作为 JS (throw new Error) 处理并将其作为文件包含在内。在 Windows 上有一个绝对源文件路径，包括触发 mkdirP 函数无限循环的: 字符。
天哪，骑什么车

我通过升级到webpack@4.41.2 修复了

我通过升级到`webpack@4.41.2` 修复了