dilanx / craco

Create React App Configuration Override, an easy and comprehensible configuration layer for Create React App.

Home Page:https://craco.js.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Change webpackConfig.entry as object, it build failed

little-buddy opened this issue · comments

commented

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)

commented

Oh, I know why!!!
image
main change to app is Ok.

commented

I close it.