I started building a project collector using Webpack 5 and I ran into a strange error. When I first run everything works without error, but after updating the styles I get an error even though the new styles are being applied. I found no errors in webpack.conf.js
webpack.config.js:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const isDev = process.env.NODE_ENV === 'development';
const isProd = !isDev;
module.exports = {
mode: 'development',
entry: {
app: './src/index.js',
},
output: {
clean: true,
filename: 'main.js',
path: path.resolve(__dirname, 'build'),
},
devtool: 'inline-source-map',
devServer: {
static: './build',
hot: true,
port: 9000,
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html'
}),
new MiniCssExtractPlugin(),
],
module: {
rules: [
{
test: /\.css$/i,
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
sourceMap: true,
},
},
],
}
]
},
optimization: {
minimize: isProd,
splitChunks: {
chunks: 'async',
minSize: 20000,
minRemainingSize: 0,
minChunks: 1,
maxAsyncRequests: 30,
maxInitialRequests: 30,
enforceSizeThreshold: 50000,
cacheGroups: {
defaultVendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10,
reuseExistingChunk: true,
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true,
},
},
},
},
};link to full repository code https://github.com/likeavenus/webpack-build-2021
Just slightly simplify a styles import:
before: import css from "./style.scss";.
after: import "./style.scss";
import "./style.scss";
import some from './some.js';
some();
if (module.hot) {
module.hot.accept();
}
Found an error in my html, I connected the script to the document once again