Webpack dev服务器热更新未反映在浏览器

时间:2015-12-04 09:28:44

标签: javascript webpack webpack-dev-server

我试图让Webpack启动并运行dev服务器热更新,但遇到了一些问题。我使用了几个Backbone模块进行测试。所以我有一个index.js条目文件,然后导入Backbone和其他3个Backbone模块。我的问题是当我更新其中一个模块,例如MovieView.js时,我可以在我的网络http://localhost:9999/dist/build/0.90b85cbef8c537af9248.hot-update.js中看到已正确更新的热门更新文件,但在控制台中我收到以下警告:

[HMR] The following modules couldn't be hot updated: (They would need a full reload!) log-apply-result.js:11 log-apply-result.js:13 [HMR] - 2 log-apply-result.js:18 [HMR] Nothing hot updated. only-dev-server.js:55 [HMR] App is up to date.

以下是我的示例文件:

webpack.config.js

var path = require('path'),
    webpack = require('webpack');

module.exports = {
    entry: {
        desktop: ['./index.js', 'webpack/hot/only-dev-server'],
        devServer: 'webpack-dev-server/client?http://localhost:9999'
    },
    output: {
        path: __dirname,
        publicPath: '/dist/build/',
        filename: '[name].min.js'
    },
    resolveLoader: {
        "modulesDirectories": ["node_modules"]
    },
    module: {
        loaders: [
            {
                test: /\.html$/,
                loader: "underscore-template-loader"
            },
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel?presets[]=es2015'
            }
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            _ : 'underscore'
        }),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.SourceMapDevToolPlugin({
            filename: '[name].min.js.map'
        })
    ]
};

gulpfile.js

gulp.task('webpack-dev-server', function(callback) {

    // modify some webpack config options
    var myConfig = Object.create(webpackConfig);
    myConfig.devtool = "eval";
    myConfig.debug = true;

    // Start a webpack-dev-server
    new WebpackDevServer(webpack(myConfig), {
        publicPath: myConfig.output.publicPath,
        hot: true,
        open: true,
        stats: {
            colors: true
        }
    }).listen(9999, 'localhost', function(err) {
        if (err) throw new gutil.PluginError('webpack-dev-server', err);
        gutil.log('[webpack-dev-server]', 'http://localhost:9999/webpack-dev-server/index.html');
    });
});

测试视图 - 更新此。$ el背景颜色以进行测试

define(['backbone', 'underscore'], function(Backbone, _) {
    return Backbone.View.extend({

        template: require('./movies.html'),

        initialize: function() {
            _.each(this.collection.toJSON(), function(movie) {
                console.log(movie);
            });

            this.$el.css('background-color', 'purple');
        },

        render: function() {
            this.$el.html(this.template({
                movies: this.collection.toJSON()
            }));

            return this;
        }
    });
});

0 个答案:

没有答案