在GitHub Actions中使用webpack无法进行生产环境构建

Question

我正在尝试使用以下操作将我的项目部署到Firebase Hosting：

on:
  push:
    branches:
      - master
  pull_request:
    branches:
      - master

jobs:
  deploy_to_firebase_hosting:

    runs-on: ubuntu-latest

    steps:
      - name: Checkout the repository
        uses: actions/checkout@master

      - name: Install Dependencies
        run: npm install

      - name: Build for production
        run: npm run build-prod

      - name: Deploy to Firebase
        uses: w9jds/firebase-action@master
        with:
          args: deploy --only hosting
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

在构建生产环境步骤中，操作失败了。我的build-prod脚本执行的命令是webpack -p --mode production。

这是此错误的错误消息：

> project-name@1.0.0 build-prod /home/runner/work/project-name/project-name
> webpack -p --mode production

/home/runner/work/project-name/project-name/node_modules/webpack-cli/bin/cli.js:93
                throw err;
                ^

TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
...

我正在研究这个错误，发现人们通过在运行构建之前删除node_modules来解决它。因此我运行了另一个操作，跳过了npm install这一步骤。

但是在生成生产版本时，它再次失败，不过这次出现了一个不同但更合理的错误：

> webpack -p --mode production


webpack not installed

Install webpack to start bundling: 
  $ npm install --save-dev webpack

npm ERR! code ELIFECYCLE
npm ERR! errno 1

如何在 Github Actions 中正确构建生产包？

谢谢！

- Itay Ganor

Answer 1

我在尝试使用GitHub actions构建和部署生产Docker容器时遇到了完全相同的问题。事实证明，我的问题是由于Webpack在构建时没有访问任何环境变量（我的Webpack配置需要这些变量）导致出错，错误与您上面收到的错误相同。 为了解决这个问题，我向我的构建命令添加了以下行：

--env.NODE_ENV=production

例如，容器调用的我的最终构建命令如下：

node --max_old_space_size=4096 ./node_modules/webpack/bin/webpack.js --env.NODE_ENV=production --progress --config webpack.prod.js

希望这有所帮助！

- Brandon Dooley