webpack - 重新加载 webpack 中的 HTML 更改

Question

我正在尝试围绕 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

以上两个以及观看html和图像并将它们复制到dist的gulp任务。这解决了复制问题，但它没有通知 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 来解决这个问题？

Answer 1

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

您可以尝试将 output.path 更改为 /dist然后在html中链接捆绑输出的js或将内容库更改为/dist/js
这是供您引用的链接:https://stackoverflow.com/a/47658586/1681972