Home

Awesome

<div align="center"> <h1>JS Entry Webpack Plugin</h1> <p>creates webpack bundles into your js entry</p> </div> <h2 align="center">Install</h2>
  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

<h2 align="center">Usage</h2>

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 */
})()
<h2 align="center">Options</h2>

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

NameTypeDefaultDescription
filename{String}config.entryJs entry name
template{String}config.output.pathJs entry path
publicPath{String}config.output.publicPathPublic 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'
    })
  ]
}