更改代码后未重新加载具有Gulp的Webpack-Dev-Server

Question

我是webpack的新手，并尝试使其与gulp一起使用。 我正在使用以下链接中找到的指南，但似乎没有用：

https://webpack.github.io/docs/usage-with-gulp.html

谁能告诉我配置的哪一部分错误？

gulpfile.js

import gulp from 'gulp';
import webpack from 'webpack';
import gutil from "gulp-util";
import WebpackDevServer from "webpack-dev-server";

import webpackConfig from './webpack.config';

gulp.task("dev-server", function(callback) {
    // Start a webpack-dev-server
    var compiler = webpack(webpackConfig);

    new WebpackDevServer(compiler, {

    }).listen(4000, "localhost", function(err) {
        if(err) throw new gutil.PluginError("webpack-dev-server", err);
        // Server listening
        gutil.log("[webpack-dev-server]", "http://localhost:4000/webpack-dev-server/index.html");

        // keep the server alive or continue?
        // callback();
    });
});

webpack.config.js

const path = require("path");

module.exports = {
    watch: true,
    entry: {
        app: __dirname+'/dev/index.js'
    },
    output: {
        path: path.join(__dirname, "dist"),
        filename: '[name].js'
    },
    module: {
        loaders: [
            {test: /\.js$/, loaders: ['babel']},
            {test: /\.scss$/, loaders: ["style", "css", "sass"]}
        ]
    }
}

Answer 1

Node.js API和Webpack开发服务器的CLI之间存在差异 。 您正在使用Node.js API，因此应在此处查看： https : //webpack.js.org/guides/hot-module-replacement/#via-the-node-js-api

在gulp任务定义函数中尝试以下方法：

// Add entry points for '/webpack-dev-server/client/index.js' necessary for live reloading
WebpackDevServer.addDevServerEntrypoints(webpackConfig, { ... dev-server-options ...});

// Start a webpack-dev-server
var compiler = webpack(webpackConfig);

new WebpackDevServer(compiler, {

}).listen(4000, "localhost", function(err) {
    if(err) throw new gutil.PluginError("webpack-dev-server", err);
    // Server listening
    gutil.log("[webpack-dev-server]", "http://localhost:4000/webpack-dev-server/index.html");

    // keep the server alive or continue?
    // callback();
});

本质上，添加一行WebpackDevServer.addDevServerEntrypoints(webpackConfig, { ... dev-server-options ...}); 到您的任务功能的开始。 这会将“ /webpack-dev-server/client/index.js”添加为您的webpack配置的条目，实时重新加载是必需的。