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:

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

Basic Usage

Require the plugin in your webpack config:

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

Add the plugin to your webpack config as follows:

1plugins: [
2  new HtmlWebpackPlugin(),
3  new HtmlWebpackInlineChunksPlugin()
4]  

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.

1entry: {
2  loading: './xxx/loading'
3},
4plugins: [
5  new HtmlWebpackPlugin({
6		inlineChunks: ['loading']
7	}),
8  new HtmlWebpackInlineChunksPlugin()
9]  

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

1entry: {
2  layer: './xxx/layer'
3  loading: './xxx/loading'
4},
5plugins: [
6  new HtmlWebpackPlugin({
7		inlineChunks: []
8	}),
9  new HtmlWebpackPlugin({
10		inlineChunks: ['layer']
11	}),
12  new HtmlWebpackInlineChunksPlugin({
13    chunks: ['loading']
14  })
15]