index.html 更改时浏览器自动重新加载 [英] browser automatic reload when index.html changes
问题描述
我在一个非常简单的设置中使用 webpack-dev-server.我发现即使当 index.js 文件更改时服务器会自动触发浏览器重新加载，但当 index.html 变化.我怎样才能做到这一点?
I am using webpack-dev-server in a very simple setup.
I've found that even though the server automatically triggers a browser reload when the index.js file changes, it does not trigger a reload when the index.html changes. How can I achieve that?
这是我的设置:
package.json
{
"name": "html-reload",
"version": "1.0.0",
"description": "",
"main": "src/index.js",
"scripts": {
"build": "node_modules/webpack/bin/webpack.js",
"start": "webpack-dev-server --host 0.0.0.0 --port 8383 --content-base dist"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^1.12.14",
"webpack-dev-server": "^1.14.1"
}
}
webpack.config.js
module.exports = {
entry: './src/index.js',
output: {
path: 'dist',
filename: 'bundle.js'
}
};
我使用以下命令启动 webpack-dev-server:npm run start 并将浏览器指向:
I launch the webpack-dev-server with: npm run start and I point my browser to:
http://localhost:8383/webpack-dev-server/index.html
我在 src/index.js 中所做的每一个更改都会在浏览器中自动刷新，但我在 dist/index.html 中所做的更改并非如此.
Every change I made in src/index.js is automatically refreshed in the browser, but not so with changes I make in dist/index.html.
推荐答案
我终于偶然发现了 html-webpack-plugin 如在本指南中.
I finally stumbled across html-webpack-plugin as described in this guide.
我跑:
npm i -D html-webpack-plugin
并将我的 webpack.config.js 编辑为如下所示:
And edited my webpack.config.js to look like this:
'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 的正确引用(这是两个文件之间的唯一区别).
The "template" index.html file now resides in my app directory and upon building the project a generated index.html file is placed in the build directory. The latter file contains the correct reference to the bundled output file bundle.js (this is the only difference between the two files).
app 中的模板"index.html 文件:
<!doctype html>
<html>
<head>
<script src="http://localhost:8090/webpack-dev-server.js"></script>
</head>
<body>
<div id='app'></div>
</body>
</html>
在build中生成的输出index.html文件:
<!doctype html>
<html>
<head>
<script src="http://localhost:8090/webpack-dev-server.js"></script>
</head>
<body>
<div id='app'></div>
<script type="text/javascript" src="bundle.js"></script></body>
</html>
现在，当运行 webpack-dev-server 时，对 index.html 的更改也会立即在浏览器中刷新.话虽如此，index.html 是如此之小，编辑它并希望编辑自动刷新浏览器的用例似乎微不足道.尽管如此，index.html 驻留在我的 app 目录中感觉更好，而不是 build 目录.
Now, when running webpack-dev-server changes to index.html are also immediately refreshed in the browser.
This being said, the index.html being so minimal, the use case for editing it and wanting the edits to automatically refresh the browser seems trivial.
Nevertheless, it feels better that index.html resides in my app directory as opposed to the build directory.
这篇关于index.html 更改时浏览器自动重新加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
