当前位置： 文江博客话题详情

Webpack HMR 未在 html 文件中更新

发布于 2025-01-18 04:25:05 字数 3753 浏览 0 评论 0原文

我现在正在使用WebPack 5，并使用HMR进行热模块替换。但是它在控制台中表明HMR工作起作用，但在HTML文件中没有更新。

我的webpack.config.js文件是：

    const path = require('path');
module.exports = {
    entry: {
        bundle: './src/index.js'
    },
    output: {
        path: path.resolve( __dirname, 'assets' ),
        filename: '[name].js'
    },
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.(js)$/,
                exclude: /node_modules/,
                use: [ 'babel-loader']
            },
            {
                test: /\.s[ac]ss$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            },
            {
                test: /\.less$/,
                use: [{
                    loader: "style-loader"
                }, {
                    loader: "css-loader"
                }, {
                    loader: "less-loader",
                    options: {
                        lessOptions: {
                            javascriptEnabled: true
                        }
                    }
                }]
            }
        ]
    },
    devServer : {
        headers: {
            'Access-Control-Allow-Origin': '*'
        },
        client: {
            progress: true,
        },
        allowedHosts: 'all',
        hot: true,
        static: {                               
            directory: path.join(__dirname, 'dist')
        },
        
    }
}

我的package.json是

  {
"name": "booking",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
  "build": "cross-env BABEL_ENV=default NODE_ENV=production webpack",
  "start": "webpack-dev-server --hot"
},
"author": "",
"license": "ISC",
"dependencies": {
  "@ant-design/icons": "^4.7.0",
  "@headlessui/react": "^1.4.1",
  "@heroicons/react": "^1.0.4",
  "@reduxjs/toolkit": "^1.6.1",
  "@tailwindcss/forms": "^0.3.4",
  "antd": "^4.16.13",
  "axios": "^0.21.4",
  "bootstrap-icons": "^1.5.0",
  "date-fns": "^2.24.0",
  "moment": "^2.29.1",
  "react": "^17.0.2",
  "react-bootstrap-icons": "^1.5.0",
  "react-dom": "^17.0.2",
  "react-multi-date-picker": "^3.1.7",
  "react-nice-dates": "^3.1.0",
  "react-redux": "^7.2.5",
  "react-smooth-list": "^1.0.2",
  "redux": "^4.1.1"
},
"devDependencies": {
  "@babel/core": "^7.15.5",
  "@babel/preset-env": "^7.15.6",
  "@babel/preset-react": "^7.14.5",
  "autoprefixer": "^10.3.4",
  "babel-loader": "^8.2.2",
  "babel-plugin-import": "^1.13.3",
  "cross-env": "^7.0.3",
  "css-loader": "^6.2.0",
  "html-webpack-plugin": "^5.5.0",
  "less": "^4.1.2",
  "less-loader": "^10.2.0",
  "node-sass": "^6.0.1",
  "postcss": "^8.3.6",
  "sass": "^1.39.2",
  "sass-loader": "^12.1.0",
  "style-loader": "^3.2.1",
  "tailwindcss": "^2.2.15",
  "webpack": "^5.52.0",
  "webpack-cli": "^4.8.0",
  "webpack-dev-server": "^4.7.4"
}

}

我的主要问题是它在控制台中编译，但实际上不更新htm文件中..我提到了if（if（模块） 。

我的./ dist/index.html是：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="wp-booking-press-container"></div>
    <script src="bundle.js"></script>
</body>
</html>
原文

I am using webpack 5 now and using HMR for hot module replacements. But It shows in console that hmr working but that is not updating in HTML file.

enter image description here

My webpack.config.js file is:

    const path = require('path');
module.exports = {
    entry: {
        bundle: './src/index.js'
    },
    output: {
        path: path.resolve( __dirname, 'assets' ),
        filename: '[name].js'
    },
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.(js)$/,
                exclude: /node_modules/,
                use: [ 'babel-loader']
            },
            {
                test: /\.s[ac]ss$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            },
            {
                test: /\.less$/,
                use: [{
                    loader: "style-loader"
                }, {
                    loader: "css-loader"
                }, {
                    loader: "less-loader",
                    options: {
                        lessOptions: {
                            javascriptEnabled: true
                        }
                    }
                }]
            }
        ]
    },
    devServer : {
        headers: {
            'Access-Control-Allow-Origin': '*'
        },
        client: {
            progress: true,
        },
        allowedHosts: 'all',
        hot: true,
        static: {                               
            directory: path.join(__dirname, 'dist')
        },
        
    }
}

My package.json is

  {
"name": "booking",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
  "build": "cross-env BABEL_ENV=default NODE_ENV=production webpack",
  "start": "webpack-dev-server --hot"
},
"author": "",
"license": "ISC",
"dependencies": {
  "@ant-design/icons": "^4.7.0",
  "@headlessui/react": "^1.4.1",
  "@heroicons/react": "^1.0.4",
  "@reduxjs/toolkit": "^1.6.1",
  "@tailwindcss/forms": "^0.3.4",
  "antd": "^4.16.13",
  "axios": "^0.21.4",
  "bootstrap-icons": "^1.5.0",
  "date-fns": "^2.24.0",
  "moment": "^2.29.1",
  "react": "^17.0.2",
  "react-bootstrap-icons": "^1.5.0",
  "react-dom": "^17.0.2",
  "react-multi-date-picker": "^3.1.7",
  "react-nice-dates": "^3.1.0",
  "react-redux": "^7.2.5",
  "react-smooth-list": "^1.0.2",
  "redux": "^4.1.1"
},
"devDependencies": {
  "@babel/core": "^7.15.5",
  "@babel/preset-env": "^7.15.6",
  "@babel/preset-react": "^7.14.5",
  "autoprefixer": "^10.3.4",
  "babel-loader": "^8.2.2",
  "babel-plugin-import": "^1.13.3",
  "cross-env": "^7.0.3",
  "css-loader": "^6.2.0",
  "html-webpack-plugin": "^5.5.0",
  "less": "^4.1.2",
  "less-loader": "^10.2.0",
  "node-sass": "^6.0.1",
  "postcss": "^8.3.6",
  "sass": "^1.39.2",
  "sass-loader": "^12.1.0",
  "style-loader": "^3.2.1",
  "tailwindcss": "^2.2.15",
  "webpack": "^5.52.0",
  "webpack-cli": "^4.8.0",
  "webpack-dev-server": "^4.7.4"
}

}

My main problem is its compiling in the console but not updating in htm file actually..I have mentioned if (module.hot) module.hot.accept() in my ./src/index.js file, but its not working yet.Anything I need to do more to get this working!

My ./dist/index.html is:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="wp-booking-press-container"></div>
    <script src="bundle.js"></script>
</body>
</html>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。
列表为空，暂无数据

关于作者

ぇ气

暂无简介

文章
评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

mb_TnrMmzAf

文章 0 评论 0

_1999

文章 0 评论 0

grace999

文章 0 评论 0

混浊又暗下来

文章 0 评论 0

像极了他

文章 0 评论 0

情何以堪。

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文