在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目前都不支持您的需求。