I stumbled upon strange behavior using Webpack 5. When I build for production everything works as expected. But when I try to start a dev server, all my assets and .js files get replaced with the content of index.html. Therefore, I get an error of unexpected token "<", when the browser tries to parse a .js file. In other words, all files are at their place, but they contain nothing but HTML markup.
Here's my output configuration:
output: {
path: path.resolve(__dirname, 'build'),
pathinfo: !isProd,
filename: isProd ? 'static/js/[name].[contenthash:8].js' : 'static/js/bundle.js',
chunkFilename: isProd ? 'static/js/[name].[contenthash:8].chunk.js' : 'static/js/[name].chunk.js',
assetModuleFilename: 'static/media/[name].[hash][ext]',
publicPath: process.env.PUBLIC_URL || './',
},
Resolve:
resolve: {
modules: ['node_modules'],
extensions: ['.js', '.ts', '.tsx', '.json', '.jsx'],
alias: {
src: path.resolve(__dirname, 'src'),
},
},
And plugins part:
plugins: [
new HtmlWebpackPlugin(
Object.assign(
{},
{
inject: true,
template: path.resolve(__dirname, './public/index.html'),
},
isProd
? {
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
},
}
: undefined,
),
),
new MiniCssExtractPlugin({
filename: 'static/css/[name].[contenthash:8].css',
chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
}),
new webpack.DefinePlugin({
REACT_APP_API: `"${process.env.REACT_APP_API}"`,
REACT_APP_BASENAME: `"${process.env.REACT_APP_BASENAME}"`,
PUBLIC_URL: `"${process.env.PUBLIC_URL || '.'}"`,
}),
// new BundleAnalyzerPlugin(),
],
I don't event have an idea what to start with. Would appreciate if anyone could help me out on that.