yarn add js-entry-webpack-plugin -D

  npm i js-entry-webpack-plugin -D

This is a webpack plugin that creates webpack bundles into your js entry. This is especially useful for Micro Frontend Project which uses js file as its entry

This plugin is inspired by html-webpack-plugin

The plugin will insert a fragment script at the beginning of you js entry, which will create a link tag to load css source. And if you don't have extracted css entry file, it wouldn't bother you

NOTE: do not use html-webpack-plugin at the same time

webpack.config.js

import JSEntryWebpackPlugin from 'js-entry-webpack-plugin'

module.exports = {
  entry: 'index.js',
  output: {
    path: __dirname + '/dist',
  },
  plugins: [new JSEntryWebpackPlugin()],
}

This will insert a fragment script dist/index.js containing the following

;(e => {
  var t = document.createElement('link')
  ;(t.href = e), (t.rel = 'stylesheet'), (t.type = 'text/css'), document.head.appendChild(t)
})('your-css-entry.css')
;(() => {
  /* dist source */
})()

You can pass a hash of configuration options to js-entry-webpack-plugin. Allowed values are as follows:

Here's an example webpack config illustrating how to use these options

webpack.config.js

{
  entry: 'index.js',
  output: {
    path: __dirname + '/custom',
  },
  plugins: [
    new JSEntryWebpackPlugin({
      filename: 'main.js',
      template: __dirname + '/custom',
      publicPath: 'https://www.custom-cdn.com'
    })
  ]
}