使用 Gulp 的 Webpack-Dev-Server 在代码更改后未重新加载答案

【问题标题】：Webpack-Dev-Server With Gulp Not Reloading After Code Change使用 Gulp 的 Webpack-Dev-Server 在代码更改后未重新加载
【发布时间】：2016-08-16 19:31:13
【问题描述】：

我是 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"]}
        ]
    }
}

【问题讨论】：

检查webpackConfig 是否符合您的预期。您可能需要使用import * as webpackConfig from './webpack.config'
谢谢，但这不会影响任何事情。我可以看到控制台中记录的内容，我什至可以看到网页刷新，但内容保持不变。
当您导航到 index.html 时，您可以在 chrome 中发布您的网络标签的屏幕截图吗？

标签： javascript gulp webpack webpack-dev-server

【解决方案1】：

有differences between the Node.js API and the CLI for webpack dev server。您正在使用 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 配置中，并且是实时重新加载所必需的。

【讨论】：