Last Updated: February 14, 2019
·
492
· soolaugust

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',
    })
  ]
}