webpack-dev-middleware的问题
现在有一个express的项目。
准备使用webpack-dev-middleware和webpack-hot-middleware达到热更的目的
代码如下:
1:app.js
var webpack = require('webpack'),
webpackDevMiddleware = require('webpack-dev-middleware'),
webpackHotMiddleware = require('webpack-hot-middleware'),
webpackDevConfig = require('./webpack.config.babel.js'),
compiler = webpack(webpackDevConfig);
//绑定compiler& the server
app.use(webpackDevMiddleware(compiler, {
hot: true,
publicPath: webpackDevConfig.output.publicPath,
stats: {
colors: true,
},
}));
app.use(webpackHotMiddleware(compiler, {
log: console.log,
path: '/__webpack_hmr',
heartbeat: 10 * 1000,
}));
2.webpack.config.babel.js:
var webpack = require('webpack');
var cheerio = require('cheerio');
var fs = require('fs');
var path = require('path');
var buildPath = path.resolve(__dirname,"public/dist/js");
var publicPath = path.resolve(__dirname,"public/dist");
var nodemodulesPath = path.resolve(__dirname,"node_modules");
const WebpackShellPlugin = require('webpack-shell-plugin');
var hotMiddlewareScript = 'webpack-hot-middleware/client?reload=true';
module.exports = {
entry: {
index : [hotMiddlewareScript,'./public/origin/js/entry.js'],
login : [hotMiddlewareScript,'./public/origin/js/login.js']
},
resolve : {
extentions : ['','js']
},
output: {
path: buildPath,
publicPath: publicPath,
filename: '[name].js'
},
module: {
loaders: [
{test: /\.css$/, loader: "style!css"},
{test: /\.js?$/, loader: 'babel',
exclude: [nodemodulesPath],
query: {presets: ['react', 'es2015']} }
]
},
plugins : [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
]
};
3.目录结构如下:
=========问题来了================
1.现在只要保存public/origin/js/entry.js文件。终端就会显示打包一次。(不科学其一,我并没有修改东西呀)
2.运行node app ->修改entry.js ->终端显示打包一次 ->页面无变化,手动刷新,结果没用变化。。
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论