Azure 管道在使用 webpack build 更新到 webpack 5 和 nodejs 18 后无限期挂起

挂起"/>

Azure 管道在使用 webpack build 更新到 webpack 5 和 nodejs 18 后无限期挂起

将 webpack 更新到 5 版本并将 node js 更新到 18.16.0 后，azure devops 管道在 webpack 构建步骤上无限期挂起。没有错误等。Npm 安装步骤工作正常。 在本地电脑上工作正常。尝试将构建代理 vmImage 版本更改为 win 2022，添加 python 安装步骤，清理 npm 缓存等。 我的yaml、package json和webpack config在附件里

name: MySpa
trigger:
- main

pool:
  vmImage: 'windows-2022'

variables:
  solution: '**/*.sln'
  buildPlatform: 'Any CPU'
  buildConfiguration: 'ReleaseSPA'
 

steps:
- script: |
    choco install python2 --version=2.7.18
    refreshenv
  displayName: 'Install Python 2.7'
  
- task: NuGetToolInstaller@0
    
- task: NuGetCommand@2
  inputs:
    command: 'restore'
    restoreSolution: '**/*.sln'
    feedsToUse: 'select'
- task: NuGetCommand@2
  inputs:
    restoreSolution: '$(solution)'

- task: NodeTool@0
  displayName: Install Node.js
  inputs:
    versionSpec: '18.16.0'

- task: Npm@1
  inputs:
    command: 'custom' 
    customCommand: 'cache clean --force'

- task: Npm@1
  inputs:
    command: 'install'
    workingDir: '$(System.DefaultWorkingDirectory)\MySpa\'

- task: Npm@1
  inputs:
    command: 'custom' 
    customCommand: 'install -g webpack webpack-cli'
    
- task: Npm@1
  inputs:
   command: 'custom'
   workingDir: '$(System.DefaultWorkingDirectory)\MySpa\'
   customCommand: 'run build:prod'
  timeoutInMinutes: 15

- task: VSBuild@1
  inputs:
    solution: '$(solution)'
    msbuildArgs: '/p:DeployOnBuild=true /p:WebPublishMethod=Package /p:PackageAsSingleFile=true /p:SkipInvalidConfigurations=true /p:DesktopBuildPackageLocation="$(build.artifactStagingDirectory)\WebApp.zip" /p:DeployIisAppPath="Default Web Site"'
    platform: '$(buildPlatform)'
    configuration: '$(buildConfiguration)'

  
- task: CopyFiles@2
  displayName: 'Copy published files to Deployment folder.'
  inputs:
    sourceFolder: $(build.artifactStagingDirectory)
    TargetFolder: $(DeploymentFolder)\MySpa_Build$(Build.BuildId)
    Contents: |
      **\*
      !**\*.cs
      !**\*.csproj
    CleanTargetFolder: true


- task: PublishPipelineArtifact@1
  inputs:
    targetPath: '$(Pipeline.Workspace)'
    artifact: 'MySpa_Build$(Build.BuildId)'
    publishLocation: 'pipeline'

"use strict";

const fs = require('fs');
const path = require("path");
const webpack = require("webpack");
const { VueLoaderPlugin } = require("vue-loader");
const CopyWebpackPlugin = require('copy-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
let oidcHtmlType = ["callback.html", "silent-renew.html"];
const applicationBasePath = "./VueApp/";

// Plugins
const miniCssExtractPlugin = new MiniCssExtractPlugin({
    filename: "css/[name]/main.css",
    chunkFilename: "css/[id].css"
});

var appEntryFiles = {};
fs.readdirSync(applicationBasePath).forEach(function (name) {

    let spaEntryPoint = applicationBasePath + name + '/app.ts';

    if (fs.existsSync(spaEntryPoint)) {
        appEntryFiles[name] = spaEntryPoint;
    }

    spaEntryPoint = applicationBasePath + name + '/app.js';
    if (fs.existsSync(spaEntryPoint)) {
        appEntryFiles[name] = spaEntryPoint;
    }

});

appEntryFiles["vendor"] = [
    path.resolve(__dirname, "VueApp/common/design/site.scss"),
];

module.exports = function (env, argv) {
    return {
        entry: appEntryFiles,
        stats: { warnings: true},
        output: {
            path: path.resolve(__dirname, "wwwroot/dist"),
            filename: "js/[name]/bundle.js",
            chunkFilename: "js/[name]/bundle.js?v=[chunkhash]",
            publicPath: "/dist/",
            clean: true,
            hashFunction: "xxhash64"
        },
        resolve: {
            extensions: [".ts", ".js", ".vue", ".json", "scss", "css"],
            alias: {
                vue$: "vue/dist/vue.esm.js",
                "@": path.join(__dirname, applicationBasePath)
            }
        },
        devtool: "source-map",
        devServer: {
            historyApiFallback: true,
            noInfo: true,
            overlay: true
        },
        module: {
            rules: [
                {
                    test: /\.css$/i,
                    use: [MiniCssExtractPlugin.loader, 'css-loader'],
                },
                {
                    test: /\.vue$/,
                    loader: "vue-loader",
                    options: {
                        preserveWhitespace: false,
                        loaders: {
                            scss: "vue-style-loader!css-loader!sass-loader", // <style lang="scss">
                            sass: "vue-style-loader!css-loader!sass-loader?indentedSyntax" // <style lang="sass">
                        }
                    }
                },
                {
                    test: /\.js$/,
                    exclude: /(node_modules|bower_components)/,
                    loader: "babel-loader"
                },
                {
                    test: /\.ts$/,
                    loader: "ts-loader",
                    options: {
                        appendTsSuffixTo: [/\.vue$/],
                        transpileOnly: true
                    }
                },
                {
                    test: /\.(scss|sass)$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        'css-loader',
                        {
                            loader: 'resolve-url-loader',
                            options: {
                                sourceMap: true
                            }
                        },
                        'sass-loader'
                    ]
                },
                {
                    test: /\.css$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        "css-loader"
                    ]
                },
                {
                    test: /\.(png|jpe?g)(\?.*)?$/,
                    use: [
                        {
                            loader: 'url-loader',
                            options: {
                                limit: 4096,
                                fallback: {
                                    loader: 'file-loader',
                                    options: {
                                        name: 'img/[name].[hash:8].[ext]'
                                    }
                                }
                            }
                        }
                    ]
                },
                {
                    test: /\.(svg)(\?.*)?$/,
                    use: [
                        {
                            loader: 'file-loader',
                            options: {
                                name: 'img/[name].[hash:8].[ext]'
                            }
                        }
                    ]
                },
                {
                    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i,
                    use: [
                        {
                            loader: 'url-loader',
                            options: {
                                limit: 4096,
                                fallback: {
                                    loader: 'file-loader',
                                    options: {
                                        name: 'fonts/[name].[hash:8].[ext]'
                                    }
                                }
                            }
                        }
                    ]
                }
            ]
        },
        plugins: [
            new webpack.ProgressPlugin(),
            new CleanWebpackPlugin(),
            new MiniCssExtractPlugin({
                filename: '[name].css',
            }),
            miniCssExtractPlugin,
            new VueLoaderPlugin(),

            new webpack.DefinePlugin({
                'process.env.NODE_ENV': JSON.stringify('production')
            }),
            new webpack.ProvidePlugin({
                Promise: "es6-promise-promise",
                Vue: ["vue/dist/vue.esm.js", "default"]
            }),

            new CopyWebpackPlugin({
                patterns: [
                    {
                        from: 'node_modules/oidc-client/dist/oidc-client.min.js',
                        to: 'js'
                    },
                    {
                        from: 'node_modules/@auth0/auth0-spa-js/dist/auth0-spa-js.development.js',
                        to: 'js'
                    },
                    //From flatten
                    {
                        from: path.join(applicationBasePath, `${oidcHtmlType[1]}`),
                        to: "../silent-renew.html",
                        noErrorOnMissing: true,
                        transform(content, path) {
                            return content.toString().replace(
                                /<base.*href=".*".*>/i,
                                '<base href="/" />'
                            );
                        },
                    },
                    {
                        from: path.join(applicationBasePath, `${oidcHtmlType[0]}`),
                        to: "../callback.html",
                        noErrorOnMissing: true,
                        transform(content, path) {
                            return content.toString().replace(
                                /<base.*href=".*".*>/i,
                                '<base href="/" />'
                            );
                        },
                    },

                ]
            })
        ],
        optimization: {
            minimize: true,
            minimizer: [
                new CompressionPlugin({
                    test: /\.(js|css|html)$/,
                    filename: '[path][base].gz',
                    algorithm: 'gzip',
                }),
            ],
        },
    };
};

{
  "name": "stock-management-app",
  "version": "1.0.0",
  "main": "app.js",
  "license": "MIT",
  "author": "NordicOil", 
  "scripts": {
    "dev": "webpack --mode none",
    "build:dev": "webpack --mode development --config webpack.config.js",
    "build:prod": "webpack --mode production --progress --config webpack.config.js",
    "publish": "npm install && webpack --mode production --config webpack.config.js && dotnet publish --configuration Release",
    "test": "jest",
    "watch-dev": "webpack --mode none --watch --color"
  },
  "dependencies": {
    "@auth0/auth0-spa-js": "^1.16.1",
    "@fortawesome/fontawesome-svg-core": "^1.2.26",
    "@fortawesome/free-solid-svg-icons": "^5.12.0",
    "@fortawesome/vue-fontawesome": "^0.1.9",
    "@mdi/font": "^5.3.45",
    "axios": "0.18.0",
    "bulmaswatch": "^0.7.5",
    "core-util-is": "^1.0.2",
    "moment": "^2.29.1",
    "oidc-client": "^1.7.1",
    "tslib": "^2.3.1",
    "vee-validate": "^2.2.3",
    "vue": "2.5.22",
    "vue-flatpickr-component": "8.1.1",
    "vue-json-compare": "^3.0.0",
    "vue-json-component": "0.3.0",
    "vue-multiselect": "2.1.3",
    "vue-notification": "1.3.14",
    "vue-router": "3.0.2",
    "vuex": "3.1.0"
  },
  "devDependencies": {
    "@types/jquery": "3.3.29",
    "@types/node": "10.12.18",
    "@vue/test-utils": "1.0.0-beta.28",
    "babel-core": "6.26.3",
    "babel-jest": "29.5.0",
    "babel-loader": "9.1.2",
    "babel-plugin-dynamic-import-node": "2.2.0",
    "babel-plugin-syntax-dynamic-import": "6.18.0",
    "babel-plugin-transform-es2015-modules-commonjs": "6.26.2",
    "babel-plugin-transform-export-extensions": "6.22.0",
    "babel-plugin-transform-runtime": "6.23.0",
    "babel-polyfill": "6.26.0",
    "babel-preset-env": "1.7.0",
    "babel-preset-stage-2": "6.24.1",
    "buefy": "^0.8.20",
    "clean-webpack-plugin": "4.0.0",
    "compression-webpack-plugin": "10.0.0",
    "copy-webpack-plugin": "11.0.0",
    "css-loader": "^3.4.2",
    "es6-promise-promise": "1.0.0",
    "mini-css-extract-plugin": "2.7.5",
    "file-loader": "6.2.0",
    "jest": "23.6.0",
    "jest-serializer-vue": "2.0.2",
    "resolve-url-loader": "3.0.0",
    "sass-loader": "13.2.2",
    "sass": "1.62.1",
    "style-loader": "^1.1.3",
    "ts-loader": "9.4.2",
    "typescript": "5.0.4",
    "url-loader": "4.1.1",
    "vue-class-component": "6.3.2",
    "vue-jest": "3.0.2",
    "vue-json-component": "0.3.0",
    "vue-loader": "^15.9.8",
    "vue-property-decorator": "9.1.2",
    "vue-style-loader": "4.1.2",
    "vue-template-compiler": "2.5.22",
    "webpack": "5.75.0",
    "css-minimizer-webpack-plugin":"5.0.0",
    "webpack-cli": "5.0.1",
    "webpack-dev-server": "4.11.1",
    "webpack-hot-middleware": "2.25.3",
    "webpack-merge": "5.8.0",
    "terser-webpack-plugin": "5.3.7", 
    "cssnano": "6.0.1"
  },
  "jest": {
    "moduleFileExtensions": [
      "js",
      "vue"
    ],
    "moduleNameMapper": {
      "^@/(.*)$": "<rootDir>/VueApp/$1"
    },
    "transform": {
      "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
      ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
    },
    "snapshotSerializers": [
      "<rootDir>/node_modules/jest-serializer-vue"
    ],
    "collectCoverage": true,
    "collectCoverageFrom": [
      "<rootDir>/VueApp/**/*.{js,vue}",
      "!**/node_modules/**"
    ]   
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

我尝试更改构建代理，尝试安装 python 2.7，添加带有 npm 缓存清理的步骤。

好吧...我自己修好了。 Webpack 5 默认使用 watch on。错误的标志不起作用，我找到了紧缩修复。

     apply: (compiler) => {
          compiler.hooks.done.tap("DonePlugin", (stats) => {
            console.log("Compile is done !");
            setTimeout(() => {
              process.exit(0);
            });
          });
        },
      },