What happens is that, everytime I change something inside the project files and the watcher reloads the page, I see the <style>
tag inside the index.html
appended after the old styles while I would like it to replace them.
const path = require( "path" );
const HtmlWebpackPlugin = require( 'html-webpack-plugin' );
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
const TerserJSPlugin = require( "terser-webpack-plugin" );
const OptimizeCSSAssetsPlugin = require( "optimize-css-assets-webpack-plugin" );
const HTMLInlineCSSWebpackPlugin = require( "html-inline-css-webpack-plugin" ).default;
const { CleanWebpackPlugin } = require( 'clean-webpack-plugin' );
const devMode = process.env.NODE_ENV === 'development';
module.exports = {
entry: {
index: path.join( __dirname, "src", "index.js" )
},
output: {
path: path.join( __dirname, "dist" ),
filename: "bundle.js"
},
devServer: {
host: '0.0.0.0',
port: 9000,
writeToDisk: true
},
optimization: {
minimizer: [new TerserJSPlugin( {} ), new OptimizeCSSAssetsPlugin( {} )],
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin( {
filename: 'index.html',
template: path.join( __dirname, "src", "index.html" ),
inject: true
} ),
new MiniCssExtractPlugin( {
filename: devMode ? '[name].css' : '[name].[hash].css',
chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
} ),
new HTMLInlineCSSWebpackPlugin()
],
module: {
rules: [
{
test: /\.(png|jpe?g|gif)$/,
exclude: /(node_modules)/,
use: ['file-loader'],
},
{
test: /\.svg$/,
exclude: /(node_modules)/,
loader: 'svg-inline-loader'
},
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: "babel-loader",
options: { presets: ["@babel/preset-env"] }
}
},
{
test: /\.styl$/,
exclude: /(node_modules)/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: { hmr: devMode },
},
//"style-loader",
"css-loader", // translates CSS into CommonJS
"stylus-loader" // compiles Stylus to CSS
]
}
]
}
};