How to set up webpack for Pug, React, and ES6

Question

I’m trying to make a website using React and ES6. I’m using Webpack to transpile my JS using Babel and it works fine. Now I need to know how to write my template in Pug (or HTML for that matter) and add it to the Webpack workflow. I want my build folder to have two files:

1. My bundle.js
2. My index.html file compiled from my index.pug file

An example webpack.config.js file would be helpful but what I really would like is just the general idea of how to do this.

Thanks!

Itinerancy

Answer 1

There are few webpack plugins you need to install first to use pug template with webpack.

1. htmlwebpack plugin
2. pug-loader

With htmlwebpack plugin you can specify your pug template file

new HtmlWebpackPlugin({
      template : './index.pug',
      inject   : true
})

pug template file will be loaded by pug-loader.

    {
        test: /\.pug$/,
        include: path.join(__dirname, 'src'),
        loaders: [ 'pug-loader' ]
    },

A sample webpack config file can be like below -

const path              = require('path');
const webpack           = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const isTest = process.env.NODE_ENV === 'test'

module.exports = {

  devtool: 'eval-source-map',

  entry: {
      app: [
          'webpack-hot-middleware/client',
          './src/app.jsx'
      ]
  },
  output: {
    path       : path.join(__dirname, 'public'),
    pathinfo   : true,
    filename   : 'bundle.js',
    publicPath : '/'
  },

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new ExtractTextPlugin("style.css", { allChunks:false }),
    isTest ? undefined : new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
    }),
    new HtmlWebpackPlugin({
          template : './index.pug',
          inject   : true
    })
  ].filter(p => !!p),

  resolve: {
    extensions: ['', '.json', '.js', '.jsx']
  },

  module: {
    loaders: [
        {
            test    : /\.jsx?$/,
            loader  : 'babel',
            exclude : /node_modules/,
            include : path.join(__dirname, 'src')
        },
        {
            test    : /\.scss?$/,
            loader  : ExtractTextPlugin.extract("style-loader", "css-loader!autoprefixer-loader!sass-loader"),
            include : path.join(__dirname, 'sass')
        },
        {
            test    : /\.png$/,
            loader  : 'file'
        },
        {
            test    : /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
            loader  : 'file'
        },
        {
            test: /\.pug$/,
            include: path.join(__dirname, 'src'),
            loaders: [ 'pug-loader' ]
        },
        {
            include : /\.json$/,
            loaders : ["json-loader"]
        }
    ]
  }
}

Wile

I'll try this. Thanks! – Itinerancy

Great! It works! The HtmlWebpackPlugin was the missing piece :) – Itinerancy

is there a way to generate pug file instead of html for output – Dagley

upvoted! isnt express already rendering the pug files on its own – Hamachi

Also needed to install pug without which the pug-loader seems lost – Eyre