Webpack.Config.Js Const path = require('path'); const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const

MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const nodeExternals = require('webpack-node-externals');
const pkg = require('./package.json');

module.exports = {
entry: './src/index.tsx',
output: {
path: path.resolve(__dirname, 'build'),
filename: '[name].[contenthash].js',
publicPath: '/build/'
},
devServer: {
historyApiFallback: true,
watchOptions: { aggregateTimeout: 300, poll: 1000 },
stats: {
colors: true,
hash: false,
version: false,
timings: false,
assets: false,
chunks: false,
modules: false,
reasons: false,
children: false,
source: false,
errors: true,
errorDetails: true,
warnings: true,
publicPath: false
},
port: 3000,
},
resolve: {
alias: {
'@components': path.resolve(__dirname, 'src/components'),
'@styles': path.resolve(__dirname, 'src/styles'),
'@hooks': path.resolve(__dirname, 'src/hooks'),
'@example': path.resolve(__dirname, 'src/example'),
'@utils': path.resolve(__dirname, 'src/utils'),
'@contexts': path.resolve(__dirname, 'src/contexts')
},
extensions: ['.ts', '.tsx', '.js', '.json', '.scss', '.png', '.jpg', '.gif', '.jpeg']
},
module: {
rules: [
{
test: /\.(jsx|tsx|js|ts)$/,
use: [
{
loader: 'babel-loader'
}
],
exclude: /node_modules/
},
{
test: /\.scss$/,
use: [
{ loader: 'style-loader' },
MiniCssExtractPlugin.loader,
{ loader: 'css-loader' },
{
loader: 'postcss-loader',
options: { config: { path: path.join(__dirname, './postcss.config.js') } }
},
{ loader: 'sass-loader', options: { sourceMap: true } }
]
},
{
test: /\.less$/,
use: [
{
loader: 'style-loader' // creates style nodes from JS strings
},
MiniCssExtractPlugin.loader,
{
loader: 'css-loader' // translates CSS into CommonJS
},
{
loader: 'postcss-loader',
options: { config: { path: path.join(__dirname, './postcss.config.js') } }
},
{
loader: 'less-loader', // compiles Less to CSS,
options: {
javascriptEnabled: true
}
}
]
},
{
test: /\.css$/,
use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader']
},

{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[path][name].[ext]'
}
}
]
},
{
test: /.(ttf|otf|eot|woff(2)?)$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/'
}
}]
},
{
test: /\.svg$/,
use: [
{
loader: 'svg-sprite-loader',
options: {
symbolId: '[name]'
}
}
]
}
]
},
optimization: {
minimizer: [new OptimizeCSSAssetsPlugin({})]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new MiniCssExtractPlugin({
filename: '[name].css'
}),
new webpack.ProgressPlugin(),
new CleanWebpackPlugin(),
new ForkTsCheckerWebpackPlugin(),
new FriendlyErrorsPlugin({
clearConsole: true
})
]
};

Не надо такие простыни в чат выкладывать

Допустим. Сообщение об ошибке было бы полезнее.

Нет сообщений об ошибке Просто в браузере не отображается ничего

В любом случае, это скорее сюда: @webpack_ru