webpack-dev-server 怎么监听html改变后 livereload？

Question

如题。 tks
没有找到类似的插件

Answer 1

1、webpack配置 html-loader

{
  test: /\.html$/,
  loader: 'html-loader?minimize=false'
}

2、入口函数处设置, 比如 main.js

// 打包的时候，此代码不进行打包
if (process.env.NODE_ENV === 'development') {
  import('./index.html');
}

Answer 2

webpack-dev-server --hot 命令启动后, 会自动开启热加载模式.
看下文档的相关章节: http://webpack.github.io/docs/webpack-dev-server.html#hot-mode

Answer 3

我也遇到同样的问题，个人还遇到的问题是webpack-dev-server不能自动刷新，需要在html页面里面插入：

<script src="http://localhost:8080/webpack-dev-server.js"></script>

才能自动刷新

Answer 4

可以使用这个插件https://github.com/jantimon/h...
支持根据模板自动生成html,修改该html代码后能自动编译...

module.exports = {

entry: {

main: __dirname + "/app/js/main.js",
test: __dirname + "/app/js/a.js"

},//入口文件
output: {

path: __dirname + "/build",//打包后的文件存放的地方
// publicPath: 'http://baidu.com/',//项目发布地址
filename: "js/[name]-[chunkhash].js"//打包后输出文件的文件名

},
...
plugins: [

new HtmlWebpackPlugin({
  // filename: "index-[hash].html",
  template: __dirname + "/app/index.html",
  title: "Webpack My Project",
  chunks: ["main", "test"],
  inject: "body"
}),

],
}