Skip to content

Commit 1ee88ad

Browse files
author
Alexey Ivanov
committed
Update package dependencies and tweak webpack configuration
The package.json dependencies and devDependencies have been updated to their newer versions. Simultaneously, the webpack.config.ts has been adjusted to better suit the new dependencies, offering up-to-date compatibility and improved webpack configuration for managing assets.
1 parent d4cb465 commit 1ee88ad

File tree

3 files changed

+97
-6546
lines changed

3 files changed

+97
-6546
lines changed

‎package.json‎

Lines changed: 34 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -9,44 +9,44 @@
99
]
1010
},
1111
"dependencies": {
12+
"eslint": "8",
1213
"react": "^17.0.1",
1314
"react-dom": "^17.0.1"
1415
},
1516
"devDependencies": {
16-
"@babel/core": "^7.12.10",
17-
"@babel/plugin-transform-runtime": "^7.14.3",
18-
"@babel/preset-env": "^7.12.11",
19-
"@babel/preset-react": "^7.12.10",
20-
"@babel/preset-typescript": "^7.12.7",
21-
"@babel/runtime": "^7.12.5",
22-
"@types/node": "^15.12.1",
23-
"@types/react": "^17.0.0",
24-
"@types/react-dom": "^17.0.0",
25-
"@types/webpack": "^5.28.0",
26-
"@types/webpack-dev-server": "=3.11.1",
27-
"@typescript-eslint/eslint-plugin": "^4.11.1",
28-
"@typescript-eslint/parser": "^4.11.1",
29-
"babel-loader": "^8.2.2",
30-
"clean-webpack-plugin": "^4.0.0-alpha.0",
31-
"css-loader": "^5.2.6",
32-
"eslint": "^7.28.0",
33-
"eslint-config-prettier": "^8.3.0",
34-
"eslint-plugin-prettier": "^3.4.0",
35-
"eslint-plugin-react": "^7.24.0",
36-
"eslint-plugin-react-hooks": "^4.2.0",
37-
"eslint-plugin-sonarjs": "^0.8.0-125",
38-
"eslint-webpack-plugin": "^2.4.1",
39-
"fork-ts-checker-webpack-plugin": "^6.0.8",
40-
"html-webpack-plugin": "^5.3.1",
41-
"husky": "^6.0.0",
42-
"lint-staged": "^11.0.0",
43-
"prettier": "^2.3.1",
44-
"style-loader": "^2.0.0",
45-
"ts-node": "^10.0.0",
46-
"typescript": "^4.3.2",
47-
"webpack": "^5.76.0",
48-
"webpack-cli": "^4.3.1",
49-
"webpack-dev-server": "^3.11.1"
17+
"@babel/core": "^7.24.5",
18+
"@babel/plugin-transform-runtime": "^7.24.3",
19+
"@babel/preset-env": "^7.24.5",
20+
"@babel/preset-react": "^7.24.1",
21+
"@babel/preset-typescript": "^7.24.1",
22+
"@babel/runtime": "^7.24.5",
23+
"@types/node": "^20.12.12",
24+
"@types/react": "^18.3.2",
25+
"@types/react-dom": "^18.3.0",
26+
"@types/webpack": "^5.28.5",
27+
"@types/webpack-dev-server": "4.7.2",
28+
"@typescript-eslint/eslint-plugin": "^7.9.0",
29+
"@typescript-eslint/parser": "^7.9.0",
30+
"babel-loader": "^9.1.3",
31+
"clean-webpack-plugin": "^4.0.0",
32+
"css-loader": "^7.1.1",
33+
"eslint-config-prettier": "^9.1.0",
34+
"eslint-plugin-prettier": "^5.1.3",
35+
"eslint-plugin-react": "^7.34.1",
36+
"eslint-plugin-react-hooks": "^4.6.2",
37+
"eslint-plugin-sonarjs": "^1.0.3",
38+
"eslint-webpack-plugin": "^4.1.0",
39+
"fork-ts-checker-webpack-plugin": "^9.0.2",
40+
"html-webpack-plugin": "^5.6.0",
41+
"husky": "^9.0.11",
42+
"lint-staged": "^15.2.2",
43+
"prettier": "^3.2.5",
44+
"style-loader": "^4.0.0",
45+
"ts-node": "^10.9.2",
46+
"typescript": "^5.4.5",
47+
"webpack": "^5.91.0",
48+
"webpack-cli": "^5.1.4",
49+
"webpack-dev-server": "^5.0.4"
5050
},
5151
"scripts": {
5252
"start": "webpack serve --config webpack.config.ts",

‎webpack.config.ts‎

Lines changed: 63 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -4,75 +4,75 @@ import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
44
import ESLintPlugin from 'eslint-webpack-plugin';
55
import { Configuration, HotModuleReplacementPlugin } from 'webpack';
66

7+
interface ConfigurationDevServer extends Configuration {
8+
devServer?: any;
9+
}
10+
711
const isProd = process.env.NODE_ENV === "production";
812

9-
const config: Configuration = {
10-
mode: isProd ? 'production' : 'development',
11-
output: {
12-
path: path.resolve(__dirname, 'build'),
13-
filename: "[name].[contenthash].js",
14-
},
15-
entry: './src/index.tsx',
16-
module: {
17-
rules: [
18-
{
19-
test: /\.(ts|js)x?$/i,
20-
exclude: /node_modules/,
21-
use: {
22-
loader: 'babel-loader',
23-
options: {
24-
presets: [
25-
'@babel/preset-env',
26-
'@babel/preset-react',
27-
'@babel/preset-typescript',
28-
],
29-
},
30-
},
31-
},
32-
{
33-
test: /\.css$/i,
34-
use: ['style-loader', 'css-loader'],
35-
},
36-
{
37-
test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
38-
type: 'asset/resource',
39-
},
40-
{
41-
test: /\.(woff(2)?|eot|ttf|otf|svg|)$/,
42-
type: 'asset/inline',
43-
},
13+
const config: ConfigurationDevServer = {
14+
mode: isProd ? 'production' : 'development',
15+
output: {
16+
path: path.resolve(__dirname, 'build'),
17+
filename: "[name].[contenthash].js",
18+
assetModuleFilename: isProd ? "[hash][ext][query]" : "[name][ext]",
19+
},
20+
entry: './src/index.tsx',
21+
module: {
22+
rules: [
23+
{
24+
test: /\.(ts|js)x?$/i,
25+
exclude: /node_modules/,
26+
use: {
27+
loader: 'babel-loader',
28+
options: {
29+
presets: [
30+
'@babel/preset-env',
31+
'@babel/preset-react',
32+
'@babel/preset-typescript',
33+
],
34+
},
35+
},
36+
},
37+
{
38+
test: /\.css$/i,
39+
use: ['style-loader', 'css-loader'],
40+
},
41+
{
42+
test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
43+
type: 'asset/resource',
44+
},
45+
{
46+
test: /\.(woff(2)?|eot|ttf|otf|svg|)$/,
47+
type: 'asset/inline',
48+
},
49+
],
50+
},
51+
resolve: {
52+
extensions: ['.tsx', '.ts', '.js'],
53+
},
54+
plugins: [
55+
new HtmlWebpackPlugin({
56+
template: 'src/index.html',
57+
}),
58+
new HotModuleReplacementPlugin(),
59+
new ForkTsCheckerWebpackPlugin({
60+
async: false,
61+
}),
62+
new ESLintPlugin(),
4463
],
45-
},
46-
resolve: {
47-
extensions: ['.tsx', '.ts', '.js'],
48-
},
49-
plugins: [
50-
new HtmlWebpackPlugin({
51-
template: 'src/index.html',
52-
}),
53-
new HotModuleReplacementPlugin(),
54-
new ForkTsCheckerWebpackPlugin({
55-
async: false,
56-
}),
57-
new ESLintPlugin({
58-
extensions: ['js', 'jsx', 'ts', 'tsx'],
59-
}),
60-
],
61-
devtool: 'inline-source-map',
62-
devServer: {
63-
contentBase: path.join(__dirname, 'build'),
64-
historyApiFallback: true,
65-
port: 4000,
66-
open: true,
67-
hot: true,
68-
compress: true,
69-
watchContentBase: true,
70-
},
64+
devtool: 'inline-source-map',
65+
devServer: {
66+
static: path.join(__dirname, 'build'),
67+
historyApiFallback: true,
68+
port: 4000,
69+
open: true,
70+
hot: true,
71+
watchFiles: 'src/**/*',
72+
},
7173
};
72-
7374
if (isProd) {
7475
delete config.devtool;
7576
delete config.devServer;
7677
}
77-
7878
export default config;

0 commit comments

Comments
 (0)