webpack - Webpack 未完成就冻结

Question

我有一个使用 webpack 的项目，当我更改代码时它突然开始冻结。奇怪的是，简单地更改 a 的名称var或从 a 中删除字符string已经开始导致 webpack 冻结。

我认为这取决于elm-webpack-loader或terser但我不知道如何调试 webpack。我环顾了 webpack 站点，但找不到任何有用的东西。

如果它有帮助，这是我的 webpack 配置：

const path = require('path');
const glob = require('glob');
const TerserPlugin = require('terser-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = (env, options) => {
  const devMode = options.mode !== 'production';

  return {
    optimization: {
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            ecma: 5,
            compress: {
              pure_funcs: [
                "F2",
                "F3",
                "F4",
                "F5",
                "F6",
                "F7",
                "F8",
                "F9",
                "A2",
                "A3",
                "A4",
                "A5",
                "A6",
                "A7",
                "A8",
                "A9"
              ],
              pure_getters: true,
              keep_fargs: false,
              unsafe_comps: true,
              unsafe: true,
              passes: 2
            },
            mangle: true
          }
        }),
      ]
    },
    entry: {
      'app': glob.sync('./vendor/**/*.js').concat(['./js/app.js'])
    },
    output: {
      filename: '[name].js',
      path: path.resolve(__dirname, '../priv/static/js'),
      publicPath: '/js/'
    },
    devtool: devMode ? 'eval-cheap-module-source-map' : undefined,
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader'
          }
        },
        {
          test: /\.elm$/,
          exclude: [/elm-stuff/, /node_modules/],
          use: {
            loader: 'elm-webpack-loader',
            options: {
              cwd: __dirname,
              debug: false, //options.mode === "development",
              optimize: options.mode === "production"
            }
          }
        }
      ]
    },
    plugins: [
      new CopyWebpackPlugin([{ from: 'static/', to: '../' }])
    ]
  }
};

我认为我最初无法提供足够的信息来解决这个确切的问题，所以我想我是在寻求有关如何调试 webpack 的指针。

编辑：我想我可能已经把范围缩小到terser-webpack-plugin了node_modules/terser-webpack-plugin/dist/worker.js:10。该行const result = minify(options);未完成。

我已将以下内容添加到worker.js：

var stdout = require("stdout-stream");

并改变：

const result = minify(options);

至

stdout.write("\nworker, minify : start\n")

const result = minify(options);

stdout.write("\nworker, minify : end\n")

连同以下内容minify.js：

var stdout = require("stdout-stream");

并改变了

const minify = options => {
  const {
    file,
    input,
    inputSourceMap,
    minify: minifyFn
  } = options;

至

const minify = options => {
  stdout.write("minify")
  const {
    file,
    input,
    inputSourceMap,
    minify: minifyFn
  } = options;

因此，如果一切顺利，我应该会看到以下输出：

worker, minify : start
minify
worker, minify : end

但我看到的唯一输出是：

worker, minify : start

然后该过程挂起而从未完成。

我以为我至少会看到

worker, minify : start
minify

我想我现在真的处于死胡同，所以任何建议都将不胜感激。

编辑： package.json

{
  "repository": {},
  "description": " ",
  "license": "MIT",
  "scripts": {
    "deploy": "webpack --mode production",
    "watch": "webpack --mode development --watch",
    "postinstall": "elm-tooling install",
    "test": "cd elm && elm-test-rs"
  },
  "dependencies": {
    "cypress": "^7.5.0",
    "elm-webpack-loader": "^7.0.1",
    "phoenix": "file:../deps/phoenix",
    "phoenix_html": "file:../deps/phoenix_html"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "babel-loader": "^8.0.0",
    "copy-webpack-plugin": "^5.1.1",
    "css-loader": "^3.4.2",
    "elm-tooling": "^1.0.2",
    "hard-source-webpack-plugin": "^0.13.1",
    "mini-css-extract-plugin": "^0.9.0",
    "node-sass": "^4.13.1",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "sass-loader": "^8.0.2",
    "terser-webpack-plugin": "^2.3.2",
    "webpack": "4.41.5",
    "webpack-cli": "^3.3.2"
  }
}

标签： webpack