Webpack热中间件不起作用并且没有错误

时间:2019-04-02 15:53:49

标签: express webpack

我正在尝试将webpack-hot-middlewarewebpack-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
}));

0 个答案:

没有答案