extract css in webpack

criticalcss.js

// webpack.config.js

module.exports = {
  entry: {
    critical: path.resolve(__dirname, "../src/css/index.scss") // this's a chunk, source from a file with my critical CSS I wanna inline!
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css"  // it's gonna be 'critical.css'
    }),
    new HtmlWebpackPlugin({  // this is the 'html-webpack-plugin'! Get it cuz we gonna need it majorly!
      template: 'path/to/your/custom/index/html', // use our custom template!
      inject: false  // important! cuz we gonna place the <link> and <script> ourselves
    })
  ],
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,  // one of the key incredients!
          {
            loader: "css-loader",
            options: {
              modules: true,
              localIdentName: "[name]__[local]"
            }
          },
          "sass-loader"
        ]
      }
    ]
  }
}