在Webpack中编辑html / jade文件时如何重新加载浏览器

Question

这是我在webpack.config.js包含的代码的一部分

const common = {
  entry: {
    style: PATHS.style,
    app: PATHS.jsComp
  },
  output: {
    path: PATHS.build,
    filename: '[name].js'
  },
  module: {
    loaders: [
      { test: /\.jade$/, loader: "jade" }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Webpack demo',
      template: PATHS.template, // Load a custom template (ejs by default but can be changed) 
    inject: 'body' // Inject all scripts into the body (this is the default so you can skip it) 
    })
  ]
};

我向您展示我认为问题所在的部分，我认为您不需要整个代码，但这基本上是此git文件的略微修改版本

当我运行webpack-dev-server一切正常。 JavaScript和SASS的更改确实会重新加载浏览器，但是当我按jade文件进行更改时，浏览器不会重新加载。 在终端中，我尝试运行这些webpack-dev-server变体

webpack-dev-server
webpack-dev-server --inline --hot
webpack-dev-server --inline --hot --colors
webpack-dev-server --inline --hot --colors --content-base app
webpack-dev-server --inline --hot --colors --content-base app --host 0.0.0.0
webpack-dev-server --inline --hot --colors --host 0.0.0.0

当我更改了jade文件时，以上6个变体都无法使浏览器重新加载。

另外，如果我没记错的话，在完成所有教程之后（找到此设置之前），浏览器再也不会重新加载html更改了。

还有什么我需要安装的（全局或其他方式）

Answer 1

根据文档 ，您应该做三件事：

• 将入口点添加到webpack配置中：webpack / hot / dev-server。
• 将新的webpack.HotModuleReplacementPlugin（）添加到webpack配置中。
• add hot：对webpack-dev-server配置为true，以在服务器上启用HMR。

据我所知，我认为您已经做过的那三件事中唯一的事情就是使用hot: true 。 我曾经通过Gulp运行webpack-dev-server，所以我的配置保留在JS对象中，而不是在命令行参数中。

尝试这个：

import webpack from 'webpack';

const common = {
  entry: {
    style: PATHS.style,
    app: [
       PATHS.jsComp,
       'webpack/hot/dev-server', `webpack-dev-server/client?http://localhost:3000`
    ]
  },
  output: {
    path: PATHS.build,
    filename: '[name].js'
  },
  module: {
    loaders: [
      { test: /\.jade$/, loader: "jade" }
    ]
  },
  devServer: {
    hot: true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
      title: 'Webpack demo',
      template: PATHS.template, // Load a custom template (ejs by default but can be changed) 
    inject: 'body' // Inject all scripts into the body (this is the default so you can skip it) 
    })
  ]
};

编辑：

在评论中讨论之后，我认为我的回答没有解决您的情况。 我以为您在更改了某些Jade 模块 （例如，某些AngularJS组件正在使用import with jade-loader来从Jade文件加载Javascript模板字符串）后尝试重新加载应用程序。 但事实证明，当您的基本HTML（Jade，但页面的基础）文件更改时，您正尝试重新加载。

如果您使用的是现代Javascript框架（React，Angular等），则基本HTML可能很小，而真正的事情发生在Javascript中。

无论如何，我不认为webpack-dev-server或html-webpack-plugin目前都不支持您的需求。