PR-442024: updating packages and adding support to vendors.css

This commit is contained in:
Alejandro Lembke Barrientos 2022-08-10 16:18:21 +00:00
parent d6454c7676
commit 8706698bda
5 changed files with 25 additions and 23 deletions

32
package-lock.json generated
View File

@ -1,12 +1,12 @@
{ {
"name": "@aleleba/create-react-ssr", "name": "@aleleba/create-react-ssr",
"version": "3.0.50", "version": "3.0.51",
"lockfileVersion": 2, "lockfileVersion": 2,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "@aleleba/create-react-ssr", "name": "@aleleba/create-react-ssr",
"version": "3.0.50", "version": "3.0.51",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@babel/register": "^7.18.9", "@babel/register": "^7.18.9",
@ -75,7 +75,7 @@
"mini-css-extract-plugin": "^2.6.1", "mini-css-extract-plugin": "^2.6.1",
"react-refresh": "^0.14.0", "react-refresh": "^0.14.0",
"redux-devtools-extension": "^2.13.9", "redux-devtools-extension": "^2.13.9",
"sass": "^1.54.3", "sass": "^1.54.4",
"sass-loader": "^13.0.2", "sass-loader": "^13.0.2",
"style-loader": "^3.3.1", "style-loader": "^3.3.1",
"terser-webpack-plugin": "^5.3.3", "terser-webpack-plugin": "^5.3.3",
@ -84,7 +84,7 @@
"url-loader": "^4.1.1", "url-loader": "^4.1.1",
"webpack-cli": "^4.10.0", "webpack-cli": "^4.10.0",
"webpack-dev-middleware": "^5.3.3", "webpack-dev-middleware": "^5.3.3",
"webpack-dev-server": "^4.9.3", "webpack-dev-server": "^4.10.0",
"webpack-hot-middleware": "^2.25.1", "webpack-hot-middleware": "^2.25.1",
"webpack-node-externals": "^3.0.0", "webpack-node-externals": "^3.0.0",
"workbox-webpack-plugin": "^6.5.4", "workbox-webpack-plugin": "^6.5.4",
@ -13199,9 +13199,9 @@
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
}, },
"node_modules/sass": { "node_modules/sass": {
"version": "1.54.3", "version": "1.54.4",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.54.3.tgz", "resolved": "https://registry.npmjs.org/sass/-/sass-1.54.4.tgz",
"integrity": "sha512-fLodey5Qd41Pxp/Tk7Al97sViYwF/TazRc5t6E65O7JOk4XF8pzwIW7CvCxYVOfJFFI/1x5+elDyBIixrp+zrw==", "integrity": "sha512-3tmF16yvnBwtlPrNBHw/H907j8MlOX8aTBnlNX1yrKx24RKcJGPyLhFUwkoKBKesR3unP93/2z14Ll8NicwQUA==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"chokidar": ">=3.0.0 <4.0.0", "chokidar": ">=3.0.0 <4.0.0",
@ -14788,9 +14788,9 @@
} }
}, },
"node_modules/webpack-dev-server": { "node_modules/webpack-dev-server": {
"version": "4.9.3", "version": "4.10.0",
"resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.9.3.tgz", "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.10.0.tgz",
"integrity": "sha512-3qp/eoboZG5/6QgiZ3llN8TUzkSpYg1Ko9khWX1h40MIEUNS2mDoIa8aXsPfskER+GbTvs/IJZ1QTBBhhuetSw==", "integrity": "sha512-7dezwAs+k6yXVFZ+MaL8VnE+APobiO3zvpp3rBHe/HmWQ+avwh0Q3d0xxacOiBybZZ3syTZw9HXzpa3YNbAZDQ==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@types/bonjour": "^3.5.9", "@types/bonjour": "^3.5.9",
@ -25238,9 +25238,9 @@
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
}, },
"sass": { "sass": {
"version": "1.54.3", "version": "1.54.4",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.54.3.tgz", "resolved": "https://registry.npmjs.org/sass/-/sass-1.54.4.tgz",
"integrity": "sha512-fLodey5Qd41Pxp/Tk7Al97sViYwF/TazRc5t6E65O7JOk4XF8pzwIW7CvCxYVOfJFFI/1x5+elDyBIixrp+zrw==", "integrity": "sha512-3tmF16yvnBwtlPrNBHw/H907j8MlOX8aTBnlNX1yrKx24RKcJGPyLhFUwkoKBKesR3unP93/2z14Ll8NicwQUA==",
"dev": true, "dev": true,
"requires": { "requires": {
"chokidar": ">=3.0.0 <4.0.0", "chokidar": ">=3.0.0 <4.0.0",
@ -26373,9 +26373,9 @@
} }
}, },
"webpack-dev-server": { "webpack-dev-server": {
"version": "4.9.3", "version": "4.10.0",
"resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.9.3.tgz", "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.10.0.tgz",
"integrity": "sha512-3qp/eoboZG5/6QgiZ3llN8TUzkSpYg1Ko9khWX1h40MIEUNS2mDoIa8aXsPfskER+GbTvs/IJZ1QTBBhhuetSw==", "integrity": "sha512-7dezwAs+k6yXVFZ+MaL8VnE+APobiO3zvpp3rBHe/HmWQ+avwh0Q3d0xxacOiBybZZ3syTZw9HXzpa3YNbAZDQ==",
"dev": true, "dev": true,
"requires": { "requires": {
"@types/bonjour": "^3.5.9", "@types/bonjour": "^3.5.9",

View File

@ -1,6 +1,6 @@
{ {
"name": "@aleleba/create-react-ssr", "name": "@aleleba/create-react-ssr",
"version": "3.0.51", "version": "3.1.0",
"description": "Starter Kit of server side render of react", "description": "Starter Kit of server side render of react",
"bin": "./bin/cli.js", "bin": "./bin/cli.js",
"main": "src/server/index", "main": "src/server/index",
@ -94,7 +94,7 @@
"mini-css-extract-plugin": "^2.6.1", "mini-css-extract-plugin": "^2.6.1",
"react-refresh": "^0.14.0", "react-refresh": "^0.14.0",
"redux-devtools-extension": "^2.13.9", "redux-devtools-extension": "^2.13.9",
"sass": "^1.54.3", "sass": "^1.54.4",
"sass-loader": "^13.0.2", "sass-loader": "^13.0.2",
"style-loader": "^3.3.1", "style-loader": "^3.3.1",
"terser-webpack-plugin": "^5.3.3", "terser-webpack-plugin": "^5.3.3",
@ -103,7 +103,7 @@
"url-loader": "^4.1.1", "url-loader": "^4.1.1",
"webpack-cli": "^4.10.0", "webpack-cli": "^4.10.0",
"webpack-dev-middleware": "^5.3.3", "webpack-dev-middleware": "^5.3.3",
"webpack-dev-server": "^4.9.3", "webpack-dev-server": "^4.10.0",
"webpack-hot-middleware": "^2.25.1", "webpack-hot-middleware": "^2.25.1",
"webpack-node-externals": "^3.0.0", "webpack-node-externals": "^3.0.0",
"workbox-webpack-plugin": "^6.5.4", "workbox-webpack-plugin": "^6.5.4",

View File

@ -67,7 +67,8 @@ if(env === 'development'){
} }
const setResponse = (html, preloadedState, manifest) => { const setResponse = (html, preloadedState, manifest) => {
const mainStyles = manifest ? manifest['frontend.css'] : 'assets/app.css'; const mainStyles = manifest ? manifest['frontend.css'] : 'assets/main/app.css';
const vendorStyles = manifest ? manifest['vendors.css'] : '/assets/vendors/app.css';
const mainBuild = manifest ? manifest['frontend.js'] : 'assets/app.js'; const mainBuild = manifest ? manifest['frontend.js'] : 'assets/app.js';
const vendorBuild = manifest ? manifest['vendors.js'] : 'assets/vendor.js'; const vendorBuild = manifest ? manifest['vendors.js'] : 'assets/vendor.js';
const manifestJson = manifest ? `<link rel="manifest" href="${manifest['manifest.json']}">` : ''; const manifestJson = manifest ? `<link rel="manifest" href="${manifest['manifest.json']}">` : '';
@ -83,6 +84,7 @@ const setResponse = (html, preloadedState, manifest) => {
<meta name="theme-color" content="#000000"> <meta name="theme-color" content="#000000">
${manifestJson} ${manifestJson}
<link href="${mainStyles}" rel="stylesheet" type="text/css"></link> <link href="${mainStyles}" rel="stylesheet" type="text/css"></link>
<link href="${vendorStyles}" rel="stylesheet" type="text/css"></link>
<title>App</title> <title>App</title>
</head> </head>
<body> <body>

View File

@ -69,7 +69,7 @@ const config: Configuration = {
new webpack.HotModuleReplacementPlugin(), new webpack.HotModuleReplacementPlugin(),
new ReactRefreshWebpackPlugin(), new ReactRefreshWebpackPlugin(),
new MiniCssExtractPlugin({ new MiniCssExtractPlugin({
filename: 'assets/app.css', filename: 'assets/[name]/app.css',
}), }),
new ESLintPlugin(), new ESLintPlugin(),
new webpack.DefinePlugin({ new webpack.DefinePlugin({

View File

@ -76,7 +76,7 @@ const frontendConfig = {
filename: '[path][base].gz', filename: '[path][base].gz',
}), }),
new MiniCssExtractPlugin({ new MiniCssExtractPlugin({
filename: 'assets/app-[fullhash].css', filename: 'assets/[name]/app-[fullhash].css',
}), }),
new WebpackManifestPlugin({ new WebpackManifestPlugin({
fileName: 'assets/manifest-hash.json', fileName: 'assets/manifest-hash.json',
@ -198,7 +198,7 @@ const serverConfig = {
filename: '[path][base].gz', filename: '[path][base].gz',
}), }),
new MiniCssExtractPlugin({ new MiniCssExtractPlugin({
filename: 'assets/app-[fullhash].css', filename: 'assets/[name]/app-[fullhash].css',
}), }),
new WebpackManifestPlugin({ new WebpackManifestPlugin({
fileName: 'assets/manifest-hash.json', fileName: 'assets/manifest-hash.json',