重新加载 webpack 中的 HTML 更改答案

【问题标题】：Reload on HTML changes in webpack重新加载 webpack 中的 HTML 更改
【发布时间】：2015-12-26 13:16:15
【问题描述】：

我正在尝试了解 webpack 以及它如何处理资源。

这是我的项目结构：

/dist
  (files that can be pushed to server)
/src
  /styles
    s.less
  /js
    main.js
    a.js
  /img
    splash.png
  profile.html
entry.js (webpack entry file)

我想要做什么：

LESS 文件编译成 CSS 并与 JS 一起打包
图像可以复制/src/img -> /dist/img 并使用其原始名称（适用于大图像）或 base64'd 并放入捆绑包中（适用于图标）
html 被复制 /src/ -> /dist/ 并使用它们的原始名称
每次我更改 html 或样式或 js 中的任何内容时，它都会执行上述步骤并在浏览器中重新加载页面

基本上我需要能够在不触摸浏览器窗口的情况下查看应用程序的当前状态

我试过的

我跑了

webpack-dev-server --content-base /dist --hot-loading（有和没有--hot-loading），但这不会在 CSS/LESS 更改时重新加载
与webpack --watch一起，这解决了CSS重新加载，但我仍然需要手动将html和图像复制到/dist
以上两个以及 gulp 任务，它监视 html 和图像并将它们复制到 dist。这解决了复制问题，但它不会通知webpack-dev-server 更改，因此每次更改 HTML 时我都需要 F5；它违背了热重载的全部目的。
我尝试添加 file-loader 但这不适用于 HTML，因为它会生成需要 html 文件的 JS 脚本

这是我的 entry.js

require("./src/js/main");
require("./src/css/s.less");

还有 webpack.config.js：

var path = require('path');
var webpack = require("webpack");
module.exports = {
    entry: "./entry.js",
    output: {
        path: path.join(__dirname,'/dist/js'),
        filename: "bundle.js"
    },
    plugins: [
        new webpack.ProvidePlugin({
            $ : "jquery",
            jQuery : "jquery",
            "window.jQuery" : "jquery",
            "root.jQuery" : "jquery"
        })
    ],
    module: {
        loaders: [
            {
                test: /\.less$/,
                loader: "style!raw!less"
            }
        ]
    }
};

有没有办法只使用 webpack 来解决这个问题？

【问题讨论】：

标签： webpack webpack-dev-server

【解决方案1】：

我猜问题是你的 output.path /dist/js 与 --content-base /dist [webpack-dev-server 的根目录] 不匹配。

您可以尝试将 output.path 更改为 /dist，然后将捆绑的输出 js 链接到 html 或将内容库更改为 /dist/js

这是供您参考的链接：https://stackoverflow.com/a/47658586/1681972

【讨论】：