Github CI/CD管道与webpack崩溃

Question

我正在尝试了解CI/CD管道是如何工作的。

我决定将其用于我的投资组合页面，该页面应该在每次推送时重新运行。

以下是我的yaml配置：

name: Build Bundle for Github Pages
on:
  push:
    branches:
      - source

env:
  NODE_ENV: production
  PUBLIC_URL: http://crrmacarse.github.io/
  GA_TRACKING_CODE: ${{ secrets.GA_TRACKING_CODE }}
  FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
      uses: actions/checkout@v1
      with:
        persist-credentials: false

    - name: Build
      run: |
        npm install
        npm run prod:pipeline
        npm run sitemap
        cp dist/index.html dist/404.html
        cp google21029c74dc702d92.html dist/
        cp robots.txt dist/

    - name: Deploy
      uses: JamesIves/github-pages-deploy-action@releases/v3
      with:
        ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
        BRANCH: source
        FOLDER: dist

下面是错误：

​

​

webpack配置源码：https://github.com/crrmacarse/crrmacarse.github.io/blob/source/compiler/production.pipeline.js

Answer 1

如果错误消息是cannot find module 'html-webpack-plugin'，您可以尝试安装它以进行测试。

以survivejs/webpack-book issue 100为例：

解决方案是在与webpack一起构建之前先运行npm i html-webpack-plugin --save-dev

OP已使用crrmacarse/crrmacarse.github.io commit 8a4397b修复了GitHub操作工作流

jobs:
  publish:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2.0.0

    - name: Use node 12
      uses: actions/setup-node@v1
      with:
          node-version: 12
          registry-url: https://registry.npmjs.org

    - name: install
      run: npm install
    - name: lint
      run: npm run sitemap
    - name: build
      run: npm run prod
    - name: copy
      run: npm run copy

然后，模块html-webpack-plugin已经正确安装并可用，如下面的Actions CI run所示。

Answer 2

在构建项目之前使用npm install，它会在将要构建项目的docker上安装npm库。

注意:别忘了在packge.json文件上定义html- define plugin