SrShark/webpack-config-PUG-HMR-reload.md

## webpack-config-PUG-HMR-reload.md

      
    Raw
  

              webpack-config-PUG-HMR-reload.md
            
          
    You need install raw-loader

Webpack 3 Config

  module: {
    rules: [
      {
        test: /\.pug$/,
        use: [
          {loader: 'raw-loader'},
          {loader: 'pug-html-loader'}
        ]
      }
    ]
  },
  plugins: [
    // Templates HTML
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './src/templates/index.pug'
    }),
    new HtmlWebpackPlugin({
      filename: 'contact.html',
      template: './src/templates/contact.pug'
    }),
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ]

app.js

// import all template pug

import 'raw-loader!./templates/index.pug'
import 'raw-loader!./templates/contact.pug'

That makes webpack listen the changes in the pug files, but it also adds this js code to the bundle.js, then you need to process app.js to clean the bundle.js.