html-webpackinline-chunks-plugin

a webpack plugin work with html-webpack-plugin，use it to insert script as inline to html file. This is an extension plugin for the webpack plugin html-webpack-plugin. It allows you to embed javascript and css source inline.

Installation

You must be running webpack on node 0.12.x or higher

Install the plugin with npm:

$ npm install --save-dev html-webpack-inline-chunks-plugin

Basic Usage

Require the plugin in your webpack config:

var HtmlWebpackInlineChunksPlugin = require('html-webpack-inline-chunks-plugin');

Add the plugin to your webpack config as follows:

plugins: [
  new HtmlWebpackPlugin(),
  new HtmlWebpackInlineChunksPlugin()
]  

The above configuration will actually do nothing due to the configuration defaults.

When you set inlineChunks to chunks array will be embedded inline in the resulting html document.

entry: {
  loading: './xxx/loading'
},
plugins: [
  new HtmlWebpackPlugin({
		inlineChunks: ['loading']
	}),
  new HtmlWebpackInlineChunksPlugin()
]  

if you have many pages and want to set the same chunk, do like this

entry: {
  layer: './xxx/layer'
  loading: './xxx/loading'
},
plugins: [
  new HtmlWebpackPlugin({
		inlineChunks: []
	}),
  new HtmlWebpackPlugin({
		inlineChunks: ['layer']
	}),
  new HtmlWebpackInlineChunksPlugin({
    chunks: ['loading']
  })
]