dilanx / craco

Create React App Configuration Override, an easy and comprehensible configuration layer for Create React App.
https://craco.js.org
Apache License 2.0
7.43k stars 499 forks source link

Change webpackConfig.entry as object, it build failed #521

Closed little-buddy closed 1 year ago

little-buddy commented 1 year ago

What's happening

image

When I change webpackConfig.entry, the build error occurs below

image

What should happen can't build success.

To reproduce only change webapckConfig.entry -> {app:config.entry}

CRACO version @7.1.0

CRACO config

/* eslint-disable @typescript-eslint/no-var-requires */
const isAnalyze = process.env.ANALYZE;
const path = require('path');
const { when } = require('@craco/craco');

const webpack = require('webpack');
const WebpackBundleAnalyzer =
    require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const StyleLintPlugin = require('stylelint-webpack-plugin');
const WepbackBar = require('webpackbar');
const Smp = require('speed-measure-webpack-plugin');
const PreloadWebapckPlugin = require('@vue/preload-webpack-plugin');

const isEnvProduction = process.env.NODE_ENV === 'production';
const addPath = dir => path.resolve(__dirname, dir);

module.exports = () => {
    console.log(isEnvProduction, 'run get craco-config-object');

    return {
        // reactScriptsVersion:''
        webpack: new Smp().wrap({
            configure: (config, { env, paths }) => {
                // eslint-disable-next-line no-param-reassign
                config.entry = {
                    app: config.entry,
                };
                // eslint-disable-next-line no-param-reassign
                config.optimization.splitChunks = {
                    cacheGroups: {
                        reactLib: {
                            test: /[\\/]node_modules[\\/](react|react-dom|react-router-dom|@reduxjs\/toolkit\/dist)[\\/]/,
                            name: 'react-lib',
                            chunks: 'all',
                            enforce: true,
                            priority: 40,
                            reuseExistingChunk: true,
                        },
                        vendors: {
                            name: `chunk-vendors`,
                            test: /[\\/]node_modules[\\/]/,
                            priority: -10,
                            chunks: 'initial',
                        },
                        common: {
                            name: `chunk-common`,
                            minChunks: 2,
                            priority: -20,
                            chunks: 'initial',
                            reuseExistingChunk: true,
                        },
                    },
                };

                return config;
            },
            plugins: [
                new WepbackBar(),
                new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn/),
                new StyleLintPlugin(),
                ...when(isAnalyze, () => [new WebpackBundleAnalyzer()], []),
                // preload
                [
                    new PreloadWebapckPlugin({
                        rel: 'preload',
                        include: 'initial',
                        fileBlacklist: [/\.map$/, /hot-update\.js$/],
                    }),
                    'append',
                ],
                // prefetch
                [
                    new PreloadWebapckPlugin({
                        rel: 'prefetch',
                        include: 'asyncChunks',
                    }),
                    'append',
                ],
            ],
            babel: {
                // loaderOptions: {
                //  cacheDirectory: true,
                // },
            },
            style: {
                postcss: {
                    mode: 'file',
                },
            },
            eslint: {
                mode: 'file',
            },
            externals: {
            },
            alias: {
                '@': addPath('./src'),
            },
        }),
    };
};

package.json

{
    "name": "cra-t",
    "version": "0.1.0",
    "license": "ISC",
    "scripts": {
        "start": "craco start",
        "build": "craco build",
        "test": "craco test",
        "lint": "eslint --cache .",
        "lint:fix": "eslint --fix .",
        "prettier": "prettier --write .",
        "format": "prettier --check .",
        "analyze": "cross-env ANALYZE=true yarn build"
    },
    "dependencies": {
        "@reduxjs/toolkit": "^1.9.5",
        "@tailwindcss/aspect-ratio": "^0.4.2",
        "@tailwindcss/typography": "^0.5.9",
        "@testing-library/jest-dom": "^5.17.0",
        "@testing-library/react": "^14.0.0",
        "@testing-library/user-event": "^14.4.3",
        "axios": "^1.4.0",
        "moment": "^2.29.4",
        "prettier": "^3.0.0",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-redux": "^8.1.2",
        "react-router-dom": "^6.14.2",
        "react-scripts": "^5.0.1",
        "redux-persist": "^6.0.0",
        "redux-thunk": "^2.4.2",
        "sass": "^1.64.2",
        "sass-loader": "^13.3.2",
        "stylelint-webpack-plugin": "^4.1.1",
        "tailwindcss": "^3.3.3",
        "webpack": "^5.88.2",
        "webpack-bundle-analyzer": "^4.9.0"
    },
    "devDependencies": {
        "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
        "@craco/craco": "^7.1.0",
        "@types/jest": "^29.5.3",
        "@types/node": "^20.4.5",
        "@types/react": "^18.2.18",
        "@types/react-dom": "^18.2.7",
        "@types/react-redux": "^7.1.25",
        "@typescript-eslint/eslint-plugin": "^6.2.1",
        "@typescript-eslint/parser": "^6.2.1",
        "@vue/preload-webpack-plugin": "^2.0.0",
        "autoprefixer": "^10.4.14",
        "cross-env": "^7.0.3",
        "eslint-config-airbnb": "^19.0.4",
        "eslint-config-prettier": "^8.9.0",
        "eslint-plugin-import": "^2.28.0",
        "eslint-plugin-jest": "^27.2.3",
        "eslint-plugin-jsx-a11y": "^6.7.1",
        "eslint-plugin-prettier": "^5.0.0",
        "eslint-plugin-react": "^7.33.1",
        "postcss-nesting": "^12.0.0",
        "postcss-plugin-px2rem": "^0.8.1",
        "preload-webpack-plugin": "^2.3.0",
        "speed-measure-webpack-plugin": "^1.5.0",
        "stylelint": "^15.10.2",
        "stylelint-config-recess-order": "^4.3.0",
        "stylelint-config-recommended": "^13.0.0",
        "stylelint-config-recommended-scss": "^12.0.0",
        "stylelint-config-standard": "^34.0.0",
        "stylelint-order": "^6.0.3",
        "typescript": "^5.1.6",
        "webpackbar": "^5.0.2"
    },
    "homepage": ".",
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    },
    "husky": {
        "hooks": {
            "pre-commit": "lint-staged"
        }
    },
    "lint-staged": {
        "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
            "prettier --write"
        ]
    }
}

Additional information (anything else that could be useful for us to help you solve your problem)

little-buddy commented 1 year ago

Oh, I know why!!!

image

main change to app is Ok.

little-buddy commented 1 year ago

I close it.