I have a problem with webpack in my react app. My project structure is like below:
- root
-- app
--- src
---- App.tsx
---- index.tsx
--- package.json
--- assets
---- styles
----- main.css
--- scripts
---- webpack
----- webpack.dev.js
--- public
---- index.html
Can someone tell me why, I've got a many of errors like below during webpack build?
ERROR in ./src/features/app/settings/AppSettingsDetailsPage.tsx 29:0-43
Module not found: Error: Can't resolve 'src/store/store' in 'C:\Users\some\Desktop\some\some\app\src\features\app\settings'
example of using import in AppSettingsDetailsPage
import { dispatch } from "src/store/store";
Here is full of my webpack configuration, It's my first journey with webpack :(
Thanks for any help!
webpack.common.js
const path = require('path');
const webpack = require('webpack');
module.exports = {
target: 'web',
entry: {
app: './src/index.ts',
},
output: {
clean: true,
path: path.resolve(__dirname, '../../dist'),
filename: '[name].[contenthash].js',
publicPath: 'dist/',
},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.json', '.svg'],
symlinks: false,
},
module: {
rules: [
{
test: /\.html$/,
exclude: /index.html/,
use: [
{
loader: 'html-loader',
options: {
sources: false,
minimize: {
removeComments: false,
collapseWhitespace: false,
},
},
},
],
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
}
],
},
};
webpack.dev.js
'use strict';
const ESLintPlugin = require('eslint-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = (env = {}) =>
merge(common, {
devtool: 'inline-source-map',
mode: 'development',
entry: "./src/index.tsx",
module: {
rules: [
{
test: /\.tsx?$/,
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true,
cacheCompression: false,
},
},
exclude: /node_modules/,
},
],
},
plugins: [
new ESLintPlugin({
lintDirtyModulesOnly: true,
extensions: ['.ts', '.tsx'],
}),
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css',
}),
new HtmlWebpackPlugin({
filename: path.resolve(__dirname, '../../public/index.html'),
template: path.resolve(__dirname, '../../public/index.html'),
inject: false,
chunksSortMode: 'none'
})
],
});