bundle.js served via webpack not working for webpack-dev-middleware + HtmlWebpackPlugin

790 Views Asked by At

So, I am trying to use webpack-dev-middleware & webpack-hot-middleware with HtmlWebpackPlugin and for that I have followed the following links https://github.com/jantimon/html-webpack-plugin/issues/145 but I really can't understand what is suggested here.

Anyway, I do get the bundle.js file in the output html but the js doesn't execute as expected.Also, I do get HMR Connected message in the console. The same does work for my production webpack file though.

How can I fix this or go about resolving this ?

Also, as per the project structure below I have multiple html files being served so any inputs on the amalgamation of these in the srcServer.js ?

package.json

...
    "start": "babel-node buildScripts/srcServer.js"
...

srcServer.js

/* eslint-disable */
import express from 'express'
import path from 'path'
import opn from 'opn'
import bodyParser from 'body-parser'
import historyApiFallback   from 'connect-history-api-fallback'
import WebpackDevMiddleware from 'webpack-dev-middleware'
import WebpackHotMiddleware from 'webpack-hot-middleware'
import WebpackConfig from '../webpack.config'
import webpack from 'webpack'

const compiler = webpack(WebpackConfig)
const app = express()
const port = 8080

app.use(historyApiFallback({
  verbose: false
}))

app.use(WebpackDevMiddleware(compiler, {
  publicPath: WebpackConfig.output.publicPath,
  hot: true,
  quiet: false,
  noInfo: false,
  lazy: false,
  stats: {
    colors: true
  }
}))

app.use(WebpackHotMiddleware(compiler))


app.use('*', function (req, res, next) {
  console.log(req.url)
  var filename = path.join(compiler.outputPath,'login/login.html');
  compiler.outputFileSystem.readFile(filename, function(err, result){
    if (err) {
      return next(err);
    }
    res.set('content-type','text/html');
    res.send(result);
    res.end();
  });
});






// set up routing
app.get('/', function (req, res) {
  res.sendFile(path.join(__dirname, '../dist/login/login.html'))
})

app.get('/dashboard', function (req, res) {
  res.sendFile(path.join(__dirname, '../dist/dashboard/dashboard.html'))
})

app.get('/assessments', function (req, res) {
  res.sendFile(path.join(__dirname, '../dist/assessments/assessments.html'))
})

app.get('/registration', function (req, res) {
  res.sendFile(path.join(__dirname, '../dist/registration/registration.html'))
})

app.get('/success', function (req, res) {
  res.sendFile(path.join(__dirname, '../dist/responses/success.html'))
})


// set up listening
app.listen(port, function (err) {
  if (err) {
    console.log(err)
  } else {
    opn('http://localhost:' + port)
  }
})

webpack.config.js

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
  mode: 'development',
  entry: [
    'webpack-hot-middleware/client?http://localhost:8080&timeout=20000', './src/login/app.js'
  ],
  target: 'web',
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/',
    filename: 'bundle.js'
  },
  plugins: [

    new webpack.HotModuleReplacementPlugin(),

    new CopyWebpackPlugin([
      {
        from: './src/images/',
        to: 'images/',
        force: true
      },
      {
        from: './node_modules/bootstrap/fonts/',
        to: 'node_modules/bootstrap/fonts/',
        force: true
      }
    ]),

    new HtmlWebpackPlugin({
      filename: 'login/login.html',
      template: './src/login/login.html',
      inject: true
    }),

    new HtmlWebpackPlugin({
      filename: 'dashboard/dashboard.html',
      template: './src/dashboard/dashboard.html',
      inject: true
    }),

    new HtmlWebpackPlugin({
      filename: 'assessments/assessments.html',
      template: './src/assessments/assessments.html',
      inject: true
    }),

    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        use: {
          loader: 'file-loader',
          options: {
            name: '../../node_modules/bootstrap/fonts/[name].[ext]'
          }
        }
      },
      {
        test: /\.(png|jpg)$/,
        use: {
          loader: 'file-loader',
          options: {
            name: '../images/[name].[ext]'
          }
        }
      },
      {
        test: /\.(html)$/,
        use: {
          loader: 'html-loader',
          options: {
            name: '../*/[name].[ext]'
          }
        }
      }
    ]
  }
}

Project Structure

enter image description here

Chrome Inspection

enter image description here

If there is too much code to understand , I have created a repo with the required code @ https://github.com/pks90/webpack-dev-and-hot-middleware-sample

0

There are 0 best solutions below