重新加载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一起放入bundle
• 图像要么/src/img -> /dist/img以其原始名称复制(适用于大图像),要么复制为base64'd(适用于图标)
• htmls /src/ -> /dist/以其原始名称复制
• 每次我更改样式或js中的html或任何内容时,它都会执行上述步骤并在浏览器中重新加载页面

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

我试过的

我跑了

• 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与[webpack-dev-server的根目录]不匹配--content-base /dist。

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

这是供您参考的链接：/sf/answers/3336101051/