我试图让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;
}
});
});