更改代碼后未重新加載具有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配置的條目，實時重新加載是必需的。