html本地修改浏览器自动更新,当index.html更改时浏览器自动重新加载

我终于绊倒了html-webpack-plugin如in this guide所述。

我运行：

npm i -D html-webpack-plugin

和编辑我webpack.config.js看起来像这样：

'use strict';

const path = require('path');

const APPDIR = 'app/';

const HtmlWebpackPlugin = require('html-webpack-plugin');

const HTMLWebpackPluginConfig = new HtmlWebpackPlugin({

template: path.resolve(__dirname, APPDIR, 'index.html'),

filename: 'index.html',

inject: 'body'

});

const config = {

context: path.resolve(__dirname, APPDIR),

entry: './main.js',

output: {

path: path.resolve(__dirname, 'build'),

filename: 'bundle.js'

},

module: {

loaders: [

{

test: /\.js$/,

loader: 'babel',

include: path.resolve(__dirname, 'app/')

},{

test: /\.css$/,

loaders: ['style', 'css']

}

]

},

plugins: [HTMLWebpackPluginConfig]

};

module.exports = config;

“模板” index.html文件现在驻留在我的app目录，并在建立项目生成的index.html文件被放置在build目录中。后者文件包含对捆绑输出文件bundle.js的正确引用(这是两个文件之间的唯一区别)。

“模板” 的index.html文件中应用：运行webpack-dev-server时

现在：

生成的输出的index.html文件中构建更改为index.html也会立即在br中刷新owser。 这就是说，index.html是如此之小，编辑它并希望编辑自动刷新浏览器的用例似乎微不足道。 尽管如此，感觉更好的是index.html驻留在我的app目录中，而不是build目录。