Azure DevOps - 如何在部署时使用Webpack构建捆绑包

Question

Azure DevOps - 如何在部署时使用Webpack构建捆绑包

7

我一直在尝试使用Azure DevOps Repos和Pipelines将Web应用程序部署到本地IIS。

我想在Azure DevOps服务上使用webpack构建捆绑包，而不是上传已打包的JavaScript和样式文件到Azure Repos。

相关信息：应用程序使用ASP.NET Core 2.2、webpack 4.30、webpack-cli 3.3.2以及带有webpack.config.js的配置（其中包含创建“dist”文件夹中捆绑包的大量设置），并且JavaScript和样式文件位于wwwroot文件夹中。

如果我上传到Repos并包含“dist”文件夹中已经打好的文件，目前来看它可以正常工作。但是我想仅上传源文件，并让Azure DevOps Repos或Pipelines构建捆绑包并创建相应的构建产物。

到目前为止，我一直在尝试使用azure-pipelines.yml。

- task: NodeTool@0
  inputs:
    versionSpec: '12.x'

- task: CmdLine@2
  inputs:
    script: |
      cd (folder) 
      cd (other folder-where package.json is located)
      npm install -g webpack webpack-cli --save-dev
      npm install
      npx webpack --config webpack.config.js

或者

- task: CmdLine@2
  inputs:
    script: |
      cd (folder)   
      cd (folder)
      npm install webpack webpack-cli --save-dev
      webpack
      npm run build (which is just 'webpack')

两者都无法正常工作。似乎npm install可以工作，但它甚至不运行webpack部分。因为我在webpack.config.js文件中使用了'webpack-messages'，所以我期望得到一些消息，例如“正在构建某个包......”，但它没有显示任何关于webpack进程的消息。下面的消息来自一个构建日志。

Starting: Webpack install and build
==============================================================================
Task         : Command line
Description  : Run a command line script using Bash on Linux and macOS and cmd.exe on Windows
Version      : 2.163.0
Author       : Microsoft Corporation
Help         : https://learn.microsoft.com/azure/devops/pipelines/tasks/utility/command-line
==============================================================================
Generating script.
========================== Starting Command Output ===========================
"C:\windows\system32\cmd.exe" /D /E:ON /V:OFF /S /C "CALL "d:\a\_temp\fc9874eb-1e72-4a4f-82af-2d3b62451eb7.cmd""
npm WARN rollback Rolling back readable-stream@2.3.6 failed (this is probably harmless): EPERM: operation not permitted, scandir 'D:\a\1\s\something\something\node_modules\fsevents\node_modules'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ webpack-cli@3.3.11
+ webpack@4.41.6
added 388 packages from 217 contributors and audited 5566 packages in 31.587s

3 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

我也在发布管道上尝试了。我添加了'npm install'，'npm custom'，'command line'或'Dealogic'的'webpack'扩展等任务，但由于我无法指定Azure DevOps Cloud机器上的package.json所在位置，因此它们都无法正常工作。

请让我知道是否可能以及如何实现。

- Fieldwing

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- iBobb · Accepted Answer

根据微软的文档，似乎在YAML流水线的script部分使用"webpack"命令就可以了：

- script: webpack

前提条件是："要使此命令起作用，请确保将webpack配置为您的package.json项目文件中的开发依赖项。这将使用默认配置运行webpack，除非您的项目根目录中有一个webpack.config.js文件。"

他们还提到，您需要在编译和测试之后执行此操作。建议您通过在package.json中使用脚本对象，将此逻辑从流水线中移出并放入代码中：

- script: npm run build

来源：Microsoft文档

编辑：我所做的是第二个建议。我在我的MVC ASP.NET项目文件中加入了以下内容：

 <Target Name="AfterBuild">
    <Exec Condition="$(Configuration) == 'Debug'" Command="npm run build-dev" />
    <Exec Condition="$(Configuration) == 'Release'" Command="npm run build-prod"/>
</Target>

例如，build-prod只是webpack.config.js中的一个脚本：

"build-prod": "SET NODE_ENV=production && webpack -p --color"，而build-dev只需使用-d参数即可...