webpack не билдит компоненты index.tsx (React Redux Toolkit TypeScript)
При команде npm run build webpack собирает проект как нода.
При запуске index.html применяются только стили, и не загружает компоненты, не выдавая ошибок ни при сборке, ни при запуске.
мой webpack.common.ts
import path from "path";
import HtmlWebpackPlugin from "html-webpack-plugin";
import TsconfigPathsPlugin from "tsconfig-paths-webpack-plugin";
module.exports = {
entry: './src/index.tsx',
devtool: 'inline-source-map', // only in dev mode
output: {
path: path.join(__dirname, '/dist'),
publicPath: '/',
filename: 'bundle.js'
},
module: {
rules: [
// TypeScript
{
test: /\.ts|\.tsx$/,
use: 'ts-loader',
exclude: /node_modules/
},
// Style
{
test: /\.s?css$/,
use: ["style-loader", "css-loader", "sass-loader"],
},
// Images
{
test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
type: 'asset/resource',
},
// Fonts and SVGs
{
test: /\.(woff(2)?|eot|ttf|otf|svg|)$/,
type: 'asset/inline',
},
]
},
resolve: {
extensions: [ '.tsx', '.ts', '.js' ],
plugins: [new TsconfigPathsPlugin({ configFile: "./tsconfig.json" })]
},
plugins: [
new HtmlWebpackPlugin({
favicon: "./public/img/favicon.ico",
template: './public/index.html'
})
]
}
package.json
{
"name": "svodki",
"version": "0.1.0",
"private": true,
"dependencies": {
"@electron/remote": "^1.2.2",
"@reduxjs/toolkit": "1.9.1",
"@testing-library/jest-dom": "5.16.5",
"@testing-library/react": "13.4.0",
"@testing-library/user-event": "14.4.3",
"@types/jest": "27.5.2",
"@types/node": "17.0.45",
"@types/react": "18.0.26",
"@types/react-dom": "18.0.9",
"bootstrap": "5.2.3",
"cors": "2.8.5",
"electron-is-dev": "^1.2.0",
"font-awesome": "4.7.0",
"lodash.debounce": "^4.0.8",
"react": "18.2.0",
"react-debounce-input": "^3.3.0",
"react-dom": "18.2.0",
"react-redux": "8.0.5",
"react-router-dom": "^6.4.5",
"react-scripts": "5.0.1",
"typescript": "4.9.4",
"use-debounce": "^9.0.2",
"web-vitals": "2.1.4"
},
"main": "src/app.tsx",
"homepage": ".",
"scripts": {
"start": "webpack serve --open --config webpack.dev.ts",
"build": "webpack --progress --color --stats-error-details --config webpack.prod.ts",
"test": "jest --coverage",
},
"directories": {
"buildResources": "assets"
}
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@types/lodash.debounce": "^4.0.7",
"concurrently": "^5.3.0",
"cross-env": "^7.0.3",
"css-loader": "6.7.1",
"dotenv-webpack": "8.0.1",
"electron": "^11.2.1",
"electron-builder": "^22.9.1",
"eslint-plugin-react-hooks": "^4.6.0",
"html-webpack-plugin": "5.5.0",
"node-sass": "7.0.3",
"prettier": "^2.2.1",
"sass": "1.55.0",
"sass-loader": "13.0.2",
"source-map-loader": "^4.0.0",
"style-loader": "3.3.1",
"stylelint": "14.13.0",
"ts-loader": "9.4.1",
"ts-node": "10.9.1",
"tsconfig-paths-webpack-plugin": "4.0.0",
"typescript": "4.8.4",
"wait-on": "^5.2.1",
"webpack": "5.74.0",
"webpack-cli": "4.10.0",
"webpack-dev-server": "4.11.1"
}
}
tsconfig.json
{
"compilerOptions": {
"outDir": "./dist/",
"target": "ES6",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "commonjs",
"sourceMap": true,
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": false,
"jsx": "react-jsx",
"baseUrl": "./src/",
},
"exclude": ["node_modules"],
"include": [
"./src/**/*", "tests"
],
}