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 file

的略微修改版本

当我运行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

根据documentation，您应该做三件事：

为webpack配置添加一个入口点：webpack / hot / dev-server。

将新的webpack.HotModuleReplacementPlugin（）添加到webpack配置中。

将hot：true添加到webpack-dev-server配置以在服务器上启用HMR。

据我所知，我认为你已经做过的那3个中唯一的就是使用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和jade-loader来加载来自Jade文件的Javascript模板字符串）被更改了。但事实证明，当您的基本HTML（嗯，Jade，但页面的基础）文件发生更改时，您正在尝试重新加载。

如果你正在使用一些现代的Javascript框架（React，Angular等），很可能你的基础HTML会非常小，真正的事情发生在Javascript中。

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

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

1 个答案: