In your package.json change
"build": "webpack --mode production",
to
"build": "webpack",
Then in the root of your project create a webpack.config.js file with the following
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'production',
entry: './src/index.tsx',
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx'],
alias: {
'react-dom': '@hot-loader/react-dom'
}
},
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './dist',
},
module: {
rules: [
{
test: /\.js$/,
use: ['babel-loader', 'source-map-loader'],
exclude: /node_modules/,
},
{
test: /\.tsx?$/,
use: ['babel-loader', 'awesome-typescript-loader'],
},
{
test: /\.css$/,
use: ['style-loader', { loader: 'css-loader', options: { importLoaders: 1 } }],
},
{
test: /\.(scss|sass)$/,
loaders: [
'style-loader',
{ loader: 'css-loader', options: { importLoaders: 1 } },
'sass-loader',
],
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: [
'file-loader?hash=sha512&digest=hex&name=img/[hash].[ext]',
'image-webpack-loader?bypassOnDebug&optipng.optimizationLevel=7&gifsicle.interlaced=false',
],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve('./src/index.html'),
}),
]
};
and run yarn build or npm run build and you should have a site that look like this one: https://compassionate-turing-d19acf.netlify.app