webpack 加载html,重新加载webpack中的HTML更改

我正试图围绕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;它击败了热重装的全部目的.

>我尝试添加文件加载器,但这不适用于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解决这个问题？