Skip to content

Latest commit

 

History

History
73 lines (56 loc) · 1.84 KB

README.md

File metadata and controls

73 lines (56 loc) · 1.84 KB
Raw

inert-entry-webpack-plugin

Webpack plugin to allow non-js entry chunks.

Webpack requires that all entry chunks emit valid JS. However, sometimes you want to use HTML or a manifest file as your entry point.

This plugin allows the use of any non-JS ("inert") file in an entry chunk, and prevents Webpack from adding its wrapper to those chunks. This only affects the main compiler, not any child compilers.

Use entry-loader or spawn-loader to emit normal entry points for JS files required in your HTML or manifest files.

Installation

npm install --save-dev inert-entry-webpack-plugin

Usage

webpack.config.js:

var InertEntryPlugin = require('inert-entry-webpack-plugin');

module.exports = {
  entry: {
    nameOfEntryChunk: 'index.html'
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].[hash].html'
  },
  module: {
    rules: [
      { test: /\.html$/, use: ['extract-loader', { loader: 'html-loader', options: { attrs: ['link:href', 'script:src'] } }] },
      { test: /\.css$/, use: ['file-loader', 'extract-loader', 'css-loader'] }
    ]
  },
  plugins: [
    new InertEntryPlugin()
  ]
  // ...
};

index.html:

<html>
<head>
  <link rel="stylesheet" href="./main.css" type="text/css">
  <script src="entry-loader!app.js"></script>
</head>
<body>...</body>
</html>

Output

nameOfEntryChunk.0dcbbaa701328a3c262cfd45869e351f.html:

<html>
<head>
  <link rel="stylesheet" href="e43b20c069c4a01867c31e98cbce33c9.css" type="text/css">
  <script src="main.bundle.js"></script>
</head>
<body>...</body>
</html>

Notice that Webpack's wrapper is not present, as you would expect for an entry chunk.

main.bundle.js will contain the wrapper, however, because it's loaded with entry-loader.