我正在尝试将webpack-hot-middleware
与webpack-dev-middleware
一起使用,尽管按照指示在我的expressjs应用程序中实现它,但我似乎无法使热重装工作对React代码,html, hbs或CSS。我的设置中缺少代码吗?如果要热重载我提到的所有文件格式,是否需要添加加载程序?
命令: nf run nodemon app.js
webpack.config.js:
const isDev = process.env.NODE_ENV === 'development';
const webpack = require('webpack');
module.exports = {
mode: isDev ? 'development' : 'production',
entry: {
index: [
"webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000",
"./public/index.js"
]
},
output: {
path: __dirname + "/dist",
filename: "bundle.js"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
},
{
test: /\.(s*)css$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
],
}
]
},
plugins: [
new webpack.HotModuleReplacementPlugin()
]
};
app.js:
var express = require('express');
var app = express();
var webpack = require('webpack');
var webpackDevMiddleware = require('webpack-dev-middleware');
var webpackHotMiddleware = require('webpack-hot-middleware');
var webpackConfig = require('./webpack.config.js');
var compiler = webpack(webpackConfig);
webpackConfig.entry["server"] = "webpack/hot/dev-server";
webpackConfig.entry["client"] = "webpack-hot-middleware/client";
var controllers = require('./app/controllers/routes');
var hbsHelper = require('./views/helpers/hbs-helper')(hbs);
//Port Setting
var port = process.env.PORT || 3000;
//Set Morgan as Logger
app.use(morgan('dev'));
//Set favicon
app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')))
// Tell express to use the webpack-dev-middleware and use the webpack.config.js
// configuration file as a base.
app.use(webpackDevMiddleware(compiler, {
publicPath: webpackConfig.output.publicPath,
serverSideRender: true,
stats: { colors: true }
}));
app.use(webpackHotMiddleware(compiler,{
log: console.log
}));