webpack-dev-middleware的问题

发布于 2022-09-03 07:38:02 字数 2253 浏览 30 评论 0

现在有一个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.目录结构如下:

clipboard.png

=========问题来了================
1.现在只要保存public/origin/js/entry.js文件。终端就会显示打包一次。(不科学其一,我并没有修改东西呀)
2.运行node app ->修改entry.js ->终端显示打包一次 ->页面无变化,手动刷新,结果没用变化。。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文