如何修复webpack上的热重新加载

b4qexyjb  于 2021-09-13  发布在  Java
关注(0)|答案(0)|浏览(245)

因此,我让webpack与“npx webpack server”一起工作,它会编译任何更改…但在进行更改时,我仍然需要刷新浏览器(例如,在options.mjs中,我将lala()更改为显示“hello”并保存,但在按下按钮后,浏览器中不会显示任何内容,直到我刷新并再次按下按钮。
publish.js(连接到webpack的页面)

import * as fnls_options from './options.mjs';

if (import.meta.webpackHot) {
    import.meta.webpackHot.accept('./options.mjs', () => {console.log('ok')});
};
//https://stackoverflow.com/questions/66085425/webpack-5-module-hot-is-undefined

options.mjs(连接到publish.js的模块)

export const divTop = document.getElementById('top');

export function createRevert(input,inputName){

    var butn=document.createElement("BUTTON");
    var br=document.createElement("BR"); //<--create a line break
    butn.setAttribute("id",input);
    butn.classList.add(`${inputName}`);
    butn.setAttribute('type','button');
    var butnType = document.createTextNode(input);
    butn.appendChild(butnType);
    divTop.appendChild(butn);
    divTop.appendChild(br);
}

export function lala(){
    console.log('hi')
}

webpack.config.cjs文件:

const path = require('path')
const webpack = require('webpack')

module.exports = {
    mode: 'development', //<---production will minify the file making it as small as possible for production
    entry: './homepage/static/js/publish.js',
    output: {
        filename: 'abda_bundle.js',
        path: path.resolve('/home/abd_p1/homepage','bunds')
            },
    //watch: true, <---dont need since theres a dev server

    devtool: 'source-map',
    devServer: {
        host: '0.0.0.0',
        port: 808,
        contentBase: '/home/abd_p1/homepage/static/js',
        hot:true, //enables hot module replacement
        inline: true,
        proxy: {
            '/api': {
                target: 'http://localhost:8001/cars/',
                pathRewrite: { '^/api': '' },
                secure: false,
                changeOrigin: true
          }
        }
      },

    plugins: [new webpack.HotModuleReplacementPlugin()]

}

package.json:

},
  "devDependencies": {
    "webpack": "^5.46.0",
    "webpack-cli": "^4.7.2",
    "webpack-dev-middleware": "^5.0.0",
    "webpack-dev-server": "^3.11.2",
    "webpack-hot-middleware": "^2.25.0"
  }

暂无答案!

目前还没有任何答案,快来回答吧!

相关问题