Mini-css-extract-plugin - how grap the hash naming on index.html

Question

I try currently to implement mini-css-extract-plugin.

I fail to implement hash naming, when I use it I don't know how lead my index.html file to grap the specific name on the fly.

If someone has any idea would be great.Thanks

Here my webpack.config.js :

plugins: [
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: 'styles.[contenthash].css'
    })
  ],
module: {
   rules: [ {
     test: /\.js|jsx$/,
     exclude: /node_modules/,
   include: path.resolve(__dirname, "src"),
     use: [
       {
   loader: "babel-loader",
   options: {
     presets: ["es2015", "stage-1", "react"]
   }
       }
     ]
   },

   {
   test: /\.css$/,
   use: [{
     loader: MiniCssExtractPlugin.loader,
     options: {
       publicPath: "./public"
     }
   }, {
     loader: "css-loader"
   }]
 }

]},

here my index.html:

<link rel="stylesheet" href="styles.css">

how translate in my html the "[contenthash]" part of my css filename ?

score 1 · Answer 1 · answered May 15 '18 at 05:06

1

You can use html-webpack-plugin in order to inject the css at build time, it supports costume the hash naming and allows you to provide your own template.

answered May 15 '18 at 05:06

felixmosh

32,615
9
69
88

effectively, the documentation indicates : _(html-webpack-plugin) is a webpack plugin that simplifies creation of HTML files to serve your webpack bundles. This is especially useful for webpack bundles that include a hash in the filename which changes every compilation._ – HoCo_ May 15 '18 at 16:15

HoCo_ · Accepted Answer · 2018-05-17T17:38:17.857

Here my basic understanding of html-webpack-plugin (thereafter HWP).

Seems that HWP create a kind of meta-bundle in which all bundles are merged. Your loaded CSS, JS, HTML bundles will be regrouped in the HWP file hence created.

The links to each loaded files will be automatically added to your HWP bundle.

Keep in mind that the HWP file's body comes virgin of any text, so, how reach HTML DOM elements in these conditions ?*

If you use Reactjs or other JavaScript library for building user interfaces, you will need to reach some DOM elements. To include theses DOM elements in your HWP, you have just to load a template file. The content of this template will be include in your HWP bundle. So you keep an access on your DOM elements and can handle your HTML code, great.

To create a template, enter these parameters in your webpack.config.js :

  plugins: [
           new HtmlWebpackPlugin({
            (...)
              template:  "path to your template.html",
            (...)                  
            })
  ];

Keep in mind that your path will be influenced by the context of your webpack.config.js.

It's up to you now

Mini-css-extract-plugin - how grap the hash naming on index.html

2 Answers2