Webpack circleci，无法构建反应项目

Question

对于我的 React 应用程序，我使用了 webpack。我有两个分支，一个用于开发，一个用于生产。我基本上做的是构建并将其推向生产。然后从远程我拉。我想自动化这个过程，发现有一个服务 CircleCI 提供 ci/cd。然而，在 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

我的webpack

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。

Webpack circleci，无法构建反应项目

Webpack circleci, cannot build a react project

continuous-integration

continuous-deployment

circleci

webpack

circleci-2.0