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
Chrome Inspection
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