Webpack Inject Entry Plugin

0.0.4 verified Sat Apr 25 auth: no javascript

A webpack plugin to inject a filepath into a webpack entry point, enabling plugin authors to inject code into the bundle before compilation. Current stable version is 0.0.4, with low release cadence (last release Aug 2023). Works with both Webpack 4 and 5. Lightweight alternative to custom entry manipulation, with TypeScript type declarations included.

Common errors

error TypeError: InjectEntryPlugin is not a constructor ↓

cause Forgetting to call .default when using require()

fix

Use const InjectEntryPlugin = require('webpack-inject-entry-plugin').default;

error Error: Entry 'main' not found. Make sure entry exists. ↓

cause Provided entry name does not exist in webpack configuration

fix

Check that entry name matches exactly, e.g., 'main' for default entry

Warnings

gotcha Plugin expects a default export; CommonJS users must require .default property. ↓

fix Use require('webpack-inject-entry-plugin').default

gotcha Only compatible with Webpack 4 and 5; not tested with Webpack 3 or lower. ↓

fix Ensure webpack version is 4 or 5

gotcha entry option must match an existing entry name in webpack config. ↓

fix Verify entry name matches exactly

Install

npm install webpack-inject-entry-plugin

yarn add webpack-inject-entry-plugin

pnpm add webpack-inject-entry-plugin

Imports

default

wrong

const InjectEntryPlugin = require('webpack-inject-entry-plugin')

correct

import InjectEntryPlugin from 'webpack-inject-entry-plugin'

Package uses default export; in CommonJS you must use require('webpack-inject-entry-plugin').default

.default

wrong

const InjectEntryPlugin = require('webpack-inject-entry-plugin')

correct

const InjectEntryPlugin = require('webpack-inject-entry-plugin').default

CommonJS users need to access .default property because package is ESM-like

InjectEntryPlugin

wrong

import { InjectEntryPlugin } from 'webpack-inject-entry-plugin'

correct

import InjectEntryPlugin from 'webpack-inject-entry-plugin'

Named import does not exist; must use default import

Quickstart

Shows how to use the plugin to inject a file into the 'main' entry.

// webpack.config.js
const InjectEntryPlugin = require('webpack-inject-entry-plugin').default;

module.exports = {
  entry: {
    main: './src/index.js',
  },
  plugins: [
    new InjectEntryPlugin({
      entry: 'main',
      filepath: './inject.js'
    }),
  ],
};

// inject.js
console.log('Injected code running!');