MiniCssExtractPlugin doesn't link with my html file

Question

When i Webpack my project using MiniCssExtractPlugin to separate css into files, it creates the main.css file but never write the link into my html file.

Here is my webpack.config.js :

const webpack = require("webpack");
const path = require("path");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin")
const dev = process.env.NODE_ENV ==="dev"
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
let cssloaders = [MiniCssExtractPlugin.loader, {loader: 'css-loader', options:{importLoaders: 2, modules: true } } ]


if(!dev) {
    cssloaders.push( {
        loader: 'postcss-loader',
        options : {

            plugins: (loader) => [


              require('autoprefixer')( { browsers : ['last 2 versions', 'ie > 8'] 
              }),
            ]
        },
})

}

let config = {
  mode : 'none',
  entry:  "./assets/js/app.js" ,
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "bundle.js",
    publicPath: "/wp/dist/"
  }, 
  devtool : dev ? "cheap-module-eval-source-map" : "source-map",
  watch : dev,
  module : {
    rules : [
      {
        test : /\.js$/,
        exclude: /(node_modules|bower_components)/,

        use : [
            'babel-loader'
        ]
      },
      {
          test : /\.css$/,
          use: cssloaders
      },
      {
          test : /\.scss$/,
          use: 
        [
          ...cssloaders,
          'sass-loader'
        ]
        ,
      },

    ]
  },
  plugins : [
    new MiniCssExtractPlugin({
      filename : '[name].css',
      chunkFilename: "[id].css"

    })

  ],
  optimization : {
    minimize : !dev
  }

}
if(!dev){
  config.plugins.push(new UglifyJsPlugin({
    sourceMap : true
  }))
}

module.exports = config;

So the loaders are in correct order : postcss-loader (if not in dev), sass-loader (for scss test), css-loader and MiniCssExtractPlugin.

When I webpack, the main.css fil is well emitted, but the html file doesn't have the link href in the head written...so there is no css :-)

bundle.js  4.85 KiB       0  [emitted]  main
 main.css  67 bytes       0  [emitted]  main

I think i miss something ?

Thank you in advance !

Answer 1

It's normal behavior because mini-css-extract-plugin only help you to extract css into seperate css file instead of include css in js file.

You need to use html-webpack-plugin to include your css into html otherwise you have to add css in your html manually