JS Entry Webpack Plugin

creates webpack bundles into your js entry

Install

  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

Usage

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 */
})()

Options

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

Name	Type	Default	Description
filename	{String}	config.entry	Js entry name
template	{String}	config.output.path	Js entry path
publicPath	{String}	config.output.publicPath	Public path

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'
    })
  ]
}