aleleba/create-react-ssr
1
0
Fork 0
mirror of https://github.com/aleleba/create-react-ssr.git synced 2025-01-09 05:26:58 -06:00
Code Issues Actions Packages Projects 1 Releases Wiki Activity

Change webpack configs to ts.

Browse Source
This commit is contained in:
Alejandro Lembke Barrientos 2022-05-24 02:08:23 +00:00
parent 0645d471bb
commit ca1870c64b
6 changed files with 72 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
package-lock.json generated
View File

@ -1,12 +1,12 @@
{
"name": "@aleleba/create-react-ssr",
"version": "2.0.3",
"version": "2.0.4",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "@aleleba/create-react-ssr",
"version": "2.0.3",
"version": "2.0.4",
"license": "MIT",
"dependencies": {
"@babel/register": "^7.17.7",
@ -53,6 +53,7 @@
"@types/react": "^18.0.9",
"@types/react-dom": "^18.0.4",
"@types/webpack-hot-middleware": "^2.25.6",
"@types/webpack-node-externals": "^2.5.3",
"@typescript-eslint/eslint-plugin": "^5.25.0",
"@typescript-eslint/parser": "^5.25.0",
"babel-jest": "^28.1.0",
@ -3576,6 +3577,16 @@
"webpack": "^5"
}
},
"node_modules/@types/webpack-node-externals": {
"version": "2.5.3",
"resolved": "https://registry.npmjs.org/@types/webpack-node-externals/-/webpack-node-externals-2.5.3.tgz",
"integrity": "sha512-A9JxaR8QXoYT95egET4AmCFuChyTlP8d18ZAnmSHuIMsFdS7QlCQQ8pmN/+FHgLIkm+ViE/VngltT5avLACY9A==",
"dev": true,
"dependencies": {
"@types/node": "*",
"webpack": "^5"
}
},
"node_modules/@types/ws": {
"version": "8.5.3",
"resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz",
@ -18165,6 +18176,16 @@
"webpack": "^5"
}
},
"@types/webpack-node-externals": {
"version": "2.5.3",
"resolved": "https://registry.npmjs.org/@types/webpack-node-externals/-/webpack-node-externals-2.5.3.tgz",
"integrity": "sha512-A9JxaR8QXoYT95egET4AmCFuChyTlP8d18ZAnmSHuIMsFdS7QlCQQ8pmN/+FHgLIkm+ViE/VngltT5avLACY9A==",
"dev": true,
"requires": {
"@types/node": "*",
"webpack": "^5"
}
},
"@types/ws": {
"version": "8.5.3",
"resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz",

7
package.json
View File

@ -1,13 +1,13 @@
{
"name": "@aleleba/create-react-ssr",
"version": "2.0.4",
"version": "2.0.5",
"description": "Starter Kit of server side render of react",
"bin": "./bin/cli.js",
"main": "src/server/index",
"scripts": {
"start": "node build/server/app-server.js",
"start:dev": "rm -rf build && webpack --mode=development --config webpack.config.dev.server.js && node build/server.js",
"build": "webpack-cli --config webpack.config.js",
"start:dev": "rm -rf build && webpack --mode=development --config webpack.config.dev.server.ts && node build/server.js",
"build": "webpack-cli --config webpack.config.ts",
"lint": "eslint ./ --ext .js --ext .ts --ext .jsx --ext .tsx",
"lint:fix": "eslint ./ --ext .js --ext .ts --ext .jsx --ext .tsx --fix",
"test": "jest",
@ -69,6 +69,7 @@
"@types/react": "^18.0.9",
"@types/react-dom": "^18.0.4",
"@types/webpack-hot-middleware": "^2.25.6",
"@types/webpack-node-externals": "^2.5.3",
"@typescript-eslint/eslint-plugin": "^5.25.0",
"@typescript-eslint/parser": "^5.25.0",
"babel-jest": "^28.1.0",

5
tsconfig.json
View File

@ -7,7 +7,6 @@
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
@ -27,7 +26,9 @@
],
"sourceMap": true,
"baseUrl": "**/*",
"outDir": "build"
"outDir": "build",
"skipLibCheck": true,
"noImplicitAny": false
},
"include": [
"**/*"

15
webpack.config.dev.server.js → webpack.config.dev.server.ts
View File

@ -1,15 +1,16 @@
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpackNodeExternals = require('webpack-node-externals');
const path = require('path');
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import webpackNodeExternals from 'webpack-node-externals';
import path from 'path';
import { Configuration } from 'webpack';
const ROOT_DIR = path.resolve(__dirname);
const resolvePath = (...args) => path.resolve(ROOT_DIR, ...args);
const resolvePath = (...args: string[]) => path.resolve(ROOT_DIR, ...args);
const BUILD_DIR = resolvePath('build');
const scriptExtensions = /\.(tsx|ts|js|jsx|mjs)$/;
const styleExtensions = /\.(css|less|styl|scss|sass|sss)$/;
const fontsExtensions = /\.(eot|otf|ttf|woff|woff2)$/;
const fontsAndImagesExtensions = /\.(png|jpg|jpeg|gif|svg|ico|mp4|avi|ttf|otf|eot|woff|woff2|pdf)$/;
module.exports = {
const config: Configuration = {
target: 'node',
mode: 'development',
name: 'server',
@ -82,4 +83,6 @@ module.exports = {
filename: 'assets/app.css',
}),
],
};
};
export default config

27
webpack.config.dev.js → webpack.config.dev.ts
View File

@ -1,16 +1,19 @@
const path = require('path');
const dotenv = require('dotenv').config();
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
import path from 'path';
import * as dotenv from 'dotenv';
import webpack, {Configuration} from 'webpack';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
import ESLintPlugin from 'eslint-webpack-plugin';
import CopyPlugin from 'copy-webpack-plugin';
const dotEnvToParse = dotenv.config();
const ROOT_DIR = path.resolve(__dirname);
const resolvePath = (...args) => path.resolve(ROOT_DIR, ...args);
const resolvePath = (...args: string[]) => path.resolve(ROOT_DIR, ...args);
const BUILD_DIR = resolvePath('build');
const PUBLIC_URL = process.env.PUBLIC_URL || '/';
module.exports = {
const config: Configuration = {
entry: ['webpack-hot-middleware/client?path=/reload_wss&timeout=2000&reload=true&autoConnect=true', `${ROOT_DIR}/../src/frontend/index.tsx`],
output: {
path: BUILD_DIR,
@ -70,7 +73,7 @@ module.exports = {
}),
new ESLintPlugin(),
new webpack.DefinePlugin({
'process.env': JSON.stringify(dotenv.parsed),
'process.env': JSON.stringify(dotEnvToParse.parsed),
'process.env.PUBLIC_URL': JSON.stringify(PUBLIC_URL),
}),
new CopyPlugin({
@ -101,7 +104,7 @@ module.exports = {
priority: 1,
filename: 'assets/vendor.js',
enforce: true,
test (module, chunks){
test (module: { nameForCondition: () => any; }, chunks: { name: string; }){
const name = module.nameForCondition && module.nameForCondition();
return chunks.name !== 'vendors' && /[\\/]node_modules[\\/]/.test(name);
},
@ -110,3 +113,5 @@ module.exports = {
},
},
};
export default config

31
webpack.config.js → webpack.config.ts
View File

@ -1,14 +1,17 @@
const path = require('path');
const dotenv = require('dotenv').config();
const webpack = require('webpack');
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
import path from 'path';
import * as dotenv from 'dotenv';
import webpack from 'webpack';
import CompressionWebpackPlugin from 'compression-webpack-plugin';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
import TerserPlugin from 'terser-webpack-plugin';
import { WebpackManifestPlugin } from 'webpack-manifest-plugin';
import { CleanWebpackPlugin } from 'clean-webpack-plugin';
import ESLintPlugin from 'eslint-webpack-plugin';
import CopyPlugin from 'copy-webpack-plugin';
const dotEnvToParse = dotenv.config();
const ROOT_DIR = path.resolve(__dirname);
const resolvePath = (...args) => path.resolve(ROOT_DIR, ...args);
const BUILD_DIR = resolvePath('build');
@ -86,7 +89,7 @@ const frontendConfig = {
}),
new ESLintPlugin(),
new webpack.DefinePlugin({
'process.env': JSON.stringify(dotenv.parsed),
'process.env': JSON.stringify(dotEnvToParse.parsed),
'process.env.PUBLIC_URL': JSON.stringify(PUBLIC_URL),
}),
new CopyPlugin({
@ -203,7 +206,7 @@ const serverConfig = {
new CleanWebpackPlugin(),
new ESLintPlugin(),
new webpack.DefinePlugin({
'process.env': JSON.stringify(dotenv.parsed),
'process.env': JSON.stringify(dotEnvToParse.parsed),
'process.env.PUBLIC_URL': JSON.stringify(PUBLIC_URL),
}),
new InjectManifest({
@ -237,4 +240,4 @@ const serverConfig = {
},
};
module.exports = [frontendConfig, serverConfig];
export default [frontendConfig, serverConfig];