serve webpack bundles into html file

As webpack serve Javascript default, so if we want to serve webpack bundles into html file, we may need external plugin: html-webpack-plugin;

2.1.1. Pre-requires

npm i --save-dev html-webpack-plugin

2.1.2. Config file

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
 entry: 'index.js',
 output: {
 path: __dirname + '/dist',
 filename: 'index_bundle.js'
 },
 plugins: [
 new HtmlWebpackPlugin()
 ]
}

2.1.3. Q & A

I already have a html file, I want to serve bundles into this html file.

1. Only need link output js files in html file.

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
 entry: 'index.js',
 output: {
 path: __dirname + '/dist',
 filename: 'index_bundle.js'
 },
 plugins: [
 new HtmlWebpackPlugin({
 template: 'index.html',
 })
 ]
}

Related protips

Have a fresh tip? Share with Coderwall community!