Comencé a construir un recopilador de proyectos usando Webpack 5 y me encontré con un error extraño. Cuando ejecuto por primera vez, todo funciona sin errores, pero después de actualizar los estilos, aparece un error a pesar de que se están aplicando los nuevos estilos. No encontré errores en 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, }, }, }, }, };enlace al código de repositorio completo https://github.com/likeavenus/webpack-build-2021
Simplemente simplifique ligeramente la importación de estilos:
antes: importar css desde "./style.scss"; .
después: importar "./style.scss";
import "./style.scss"; import some from './some.js'; some(); if (module.hot) { module.hot.accept(); }Encontré un error en mi html, conecté el script al documento una vez más