我使用的WebPack-DEV-服務器的WebPack V5和一個原因，當我改變了我的CSS和更新時間，預期JS的變化，但對HTML檔案我必須手動重繪 瀏覽器才能看到新編譯過的版本。
src
|-index.html
|-index.js
webpack.config.js
const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
mode: "development",
output: {
clean: true,
filename: "bundel.js",
path: path.resolve(__dirname, "dist"),
},
plugins: [
new htmlWebpackPlugin({
filename: "index.html",
template: path.resolve(__dirname, "src", "index.html"),
}),
],
};
我的package.json devDependencies
"devDependencies": {
"html-webpack-plugin": "^5.5.0",
"webpack": "^5.70.0",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.7.4"
}
我開始我的服務器npx webpack serve --open
我添加CSS檔案和測驗其相對CSS裝載機和洗掉它讓我以后肯定它的作業，只是HTML的問題
當您更改index.html的內容，您可以復制的問題
uj5u.com熱心網友回復：
嘗試使用devserver選項重新加載頁面并壓縮所有內容。使用此腳本配置而不是運行npx webpack serve --open運行：npm run start
"scripts": {
"start": "webpack-dev-server",
"build": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
并嘗試為webpack.config.js使用此基本配置
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// Default settings
mode:'development',
devtool:'inline-source-map',
entry:{
main: path.join(__dirname,'src','index.js')
},
output:{
filename:'index.js',
path: path.resolve(__dirname,'dist'),
clean:true,
},
// Loaders
module:{
// JavaScript
rules:[
{
test: /\.js$/i,
use:{
loader:'babel-loader',
options:{
"presets":['@babel/preset-react']
}}
},
// Css
{
test: /\.css$/i, use:['style-loader','css-loader']
}
]
},
// Plugins
plugins:[
new HtmlWebpackPlugin({
template: path.join(__dirname,'public','index.html') ,
filename:'index.html'
})
],
// DevServer
devServer:{
port:8080,
open:true,
compress:true,
hot:true,
liveReload:true,
}
};
uj5u.com熱心網友回復：
問題是，webpack-dev-server不看默認HTML檔案
所以我發現這兩種解決方案：
- 第一種方案是內置擲devServer加入
watchFiles：
devServer: {
watchFiles: ["src/*.html"],
hot: true,
},
- 使用外部插件第二溶液稱為
browser-sync-webpack-plugin
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/440112.html
標籤：javascript 网页包 webpack-开发服务器 html-webpack-插件