Webpack circleci，无法构建反应项目

Question

对于我的react应用，我使用了webpack。我有两个分支机构，一个用于开发，一个用于生产。我基本上要做的就是构建并将其推向生产。然后从远程我拉。我想自动执行此过程，发现有一个提供ci / cd的服务CircleCI。但是，在webpack构建完成后，它以状态代码2退出。我不确定问题出在哪里，因为错误消息什么也没说。

完整错误消息：https://circleci.com/api/v1.1/project/github/abduraufsherkulov/torguemtut.dev/66/output/104/0?file=true&allocation-id=5ec29fb3cc4cb233652ab1f3-0-build%2F46E8732F

config.yaml

version: 2.1
jobs:
  initial-step:
    machine:
      enabled: true
    steps:
      - run: 
          name: Create a folder
          command: |
            mkdir dist
  build-and-test:
    working_directory: ~/myrepo
    docker:
      - image: circleci/node:12.16.1
    steps:
      - checkout
      - run:
          name: Install
          command: npm install
      - run:
          name: Test
          command: npm test
      - run:
          name: Build
          command: npm run build
  deploy:
    machine:
      enabled: true
    steps:
      - run: 
          name: Deploy Over SSH
          command: |
            scp -P 7822 -r dist/* test@test:/oo.uz/
workflows:
   build-and-deploy:
     jobs:
       - initial-step
       - build-and-test:
           requires:
             - initial-step # only deploy once build job has completed
       - deploy:
           requires:
             - build-and-test # only deploy once build job has completed
           filters:
             branches:
               only: master # only deploy on the master branch

我的网页包

const path = require("path");
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const FixStyleOnlyEntriesPlugin = require("webpack-fix-style-only-entries");

function recursiveIssuer(m) {
    if (m.issuer) {
        return recursiveIssuer(m.issuer);
    } else if (m.name) {
        return m.name;
    } else {
        return false;
    }
}

module.exports = merge(common, {
    mode: "production",
    optimization: {
        minimizer: [new TerserPlugin({
            cache: true,
            parallel: true,
            terserOptions: {
                compress: {
                    dead_code: true,
                    conditionals: true,
                    booleans: true
                },
                module: false,
                output: {
                    comments: false,
                    beautify: false,
                }
            }
        }), new OptimizeCSSAssetsPlugin({})
        ],
        runtimeChunk: 'single',
        splitChunks: {
            cacheGroups: {
                vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendors',
                    chunks: 'all'
                },
                styles: {
                    name: 'styles',
                    test: (m, c, entry = 'styles') =>
                        m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
                    chunks: 'all',
                    enforce: true,
                },
                fonts: {
                    name: 'fonts',
                    test: (m, c, entry = 'fonts') =>
                        m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
                    chunks: 'all',
                    enforce: true,
                },
            }
        }
    },
    output: {
        path: path.resolve(__dirname, "dist/"),
        filename: '[name].[contenthash].js',
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: "./src/index.html",
            title: 'Output Management',
            favicon: "./src/images/favicon.png"
        }),
        new FixStyleOnlyEntriesPlugin(),
        new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // all options are optional
            filename: '[name].css',
            chunkFilename: '[name].[contenthash].css',
            ignoreOrder: false, // Enable to remove warnings about conflicting order
        }),
    ],
});

Answer 1

我很笨，首先请确保您的NODE_ENV正在开发中！因为当NODE_ENV投入生产时，npm不会安装devDependencies（在我的情况下是webpack，cross-env等），因此出现错误。其次，请确保在发出拉取请求时（或在circleCI - checkout的情况下），文件的命名与本地项目相同。最初创建文件Style.css并将其更改为style.css时，github认为它不是更改，也不会将其更改为style.css。