indexhtml-webpack-plugin

Index HTML plugin for webpack

Motivation

One of the "entry points" to a web application is typically the index.html file, but entry points in webpack can only produce Javascript assets. With this plugin it is possible to produce a .html asset instead.

Features

• Allows an entry point for a .html file to produce an .html asset
• Replaces references to Javascript entry points (<script src="...">) with the references to the bundled assets

Installation

npm install --save-dev indexhtml-webpack-plugin

Usage

Declare your index.html as an entry point in your webpack.config.js file:

module.exports = {
 
    entry: {
        'index.html': './index.html'
    }
    
    // ...
}

Add the html loader for index.html.

module.exports = {
    // ...
 
    module: {
        loaders: [
            {
                test: /index\.html$/,
                loader: 'html'
            },
            
            // If you have any other loaders that match HTML files, make sure to exclude index.html from their pattern
            {
                test: /\.html$/,
                exclude: /index\.html$/,
                loader: /* ... */
            }
        ]
    }
    
    // ...
}

Add the IndexHtmlPlugin. It takes the names of the source file and target file as parameters.

var IndexHtmlPlugin = require('indexhtml-webpack-plugin');
 
module.exports = {
    // ...
    
    plugins: [
        new IndexHtmlPlugin('index.html', 'index.html')
    ]
    
    // ...
}

Using with CSS

You can use the HTML loader to detect links to external resources (like stylesheets), so they will become dependencies of the "index.html" module. Use the extract-text-webpack-plugin to extract these stylesheets into separate files.

If you have multiple <link> tags that reference external stylesheet, these stylesheets might actually end up in the same bundled asset. The plugin will automatically coalesce all <link> tags with the same rel and href attributes into one.

Example webpack.config.js:

var ExtractTextPlugin = require('extract-text-webpack-plugin'),
    IndexHtmlPlugin = require('indexhtml-webpack-plugin');
    
var cssExtractPlugin = new ExtractTextPlugin('styles/[contenthash:16].css');
 
module.exports = {
    context: path.resolve(__dirname, 'src'),
    
    entry: {
        'index.html': './index.html',
        app: './app.js'
    }
    
    module: {
        loaders: [
            {
                test: /index\.html$/,
                loader: 'html?attrs=link:href'
            },
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'jshint'
            },
            {
                test: /\.css$/,
                loader: cssExtractPlugin.extract('style', 'css')
            }
        ]
    },
    
    plugins: [
        cssExtractPlugin,
        new IndexHtmlPlugin('index.html', 'index.html')
    ]
};

License

MIT (http://www.opensource.org/licenses/mit-license.php)