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.
<script src="https://github.com/unbroken-dome/indexhtml-webpack-plugin/raw/master/..">
) with the references to the bundled assetsnpm install --save-dev indexhtml-webpack-plugin
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')
]
// ...
}
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')
]
};