Webpack devServer v. 4.x.x 实时重新加载不工作
Webpack devServer v. 4.x.x live reload not working
我正在关注这些 webpack 5 guides,并且 webpack-dev-server v4.3.1 不会实时重新加载示例项目(编辑 JavaScript 文件后会发生重新编译)。也许我错过了一步?
1.你能告诉我问题出在哪里吗?
这是我的配置:
package.json
{
"name": "components",
"version": "1.0.0",
"description": "",
"private": true,
"devDependencies": {
"autoprefixer": "^10.3.7",
"eslint": "^7.32.0",
"eslint-config-airbnb-base": "^14.2.1",
"html-loader": "^2.1.2",
"html-webpack-plugin": "^5.3.2",
"postcss": "^8.3.9",
"tailwindcss": "^2.2.16",
"webpack": "^5.58.1",
"webpack-cli": "^4.9.0",
"webpack-dev-middleware": "^5.2.1",
"webpack-dev-server": "^4.3.1"
},
"scripts": {
"start": "webpack serve --open",
},
"repository": {
"type": "git",
"url": "components"
},
"author": "Karl",
"license": "ISC",
"dependencies": {
"lodash": "^4.17.21"
}
}
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: {
index: './src/index.js',
print: './src/print.js',
},
devServer: {
static: {
directory: './dist',
watch: true
},
},
plugins: [
new HtmlWebpackPlugin({
title: 'Output Management',
}),
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
clean: true,
}
};
下面是 运行 npm 启动脚本的结果(./src 中的 2 个文件,index.js 和 print.js,是从上面链接的指南中复制的)。如果我编辑其中一个文件,实时重新加载不起作用,但在手动刷新浏览器后,编辑会反映出来。
如果重要的话,以上内容来自 VS Code 的 Bash 终端,我是 运行 Windows 10.
2) 奖励:为了实时重新加载位于项目根文件夹中的静态 index.html 文件,我需要进行哪些配置更改?
此配置应该可以解决问题:
devServer: {
hot: false, // optional, but you must not set both hot and liveReload to true
liveReload: true
}
静态index.html的实时重载可以通过这个插件配置来实现:
plugins: [
...,
new HtmlWebpackPlugin({ template: "src/index.html" })
]
我正在关注这些 webpack 5 guides,并且 webpack-dev-server v4.3.1 不会实时重新加载示例项目(编辑 JavaScript 文件后会发生重新编译)。也许我错过了一步?
1.你能告诉我问题出在哪里吗?
这是我的配置:
package.json
{
"name": "components",
"version": "1.0.0",
"description": "",
"private": true,
"devDependencies": {
"autoprefixer": "^10.3.7",
"eslint": "^7.32.0",
"eslint-config-airbnb-base": "^14.2.1",
"html-loader": "^2.1.2",
"html-webpack-plugin": "^5.3.2",
"postcss": "^8.3.9",
"tailwindcss": "^2.2.16",
"webpack": "^5.58.1",
"webpack-cli": "^4.9.0",
"webpack-dev-middleware": "^5.2.1",
"webpack-dev-server": "^4.3.1"
},
"scripts": {
"start": "webpack serve --open",
},
"repository": {
"type": "git",
"url": "components"
},
"author": "Karl",
"license": "ISC",
"dependencies": {
"lodash": "^4.17.21"
}
}
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: {
index: './src/index.js',
print: './src/print.js',
},
devServer: {
static: {
directory: './dist',
watch: true
},
},
plugins: [
new HtmlWebpackPlugin({
title: 'Output Management',
}),
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
clean: true,
}
};
下面是 运行 npm 启动脚本的结果(./src 中的 2 个文件,index.js 和 print.js,是从上面链接的指南中复制的)。如果我编辑其中一个文件,实时重新加载不起作用,但在手动刷新浏览器后,编辑会反映出来。
如果重要的话,以上内容来自 VS Code 的 Bash 终端,我是 运行 Windows 10.
2) 奖励:为了实时重新加载位于项目根文件夹中的静态 index.html 文件,我需要进行哪些配置更改?
此配置应该可以解决问题:
devServer: {
hot: false, // optional, but you must not set both hot and liveReload to true
liveReload: true
}
静态index.html的实时重载可以通过这个插件配置来实现:
plugins: [
...,
new HtmlWebpackPlugin({ template: "src/index.html" })
]