1

so, i have the webpack working with 'npx webpack server' and it compiles any changes...but i still need to refresh the browser when i make a change (for example, in options.mjs, i change lala() to show 'hello' and save, but nothing shows up in the browser after i press the button, until i refresh and press again.

publish.js (the page hooked up to 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 (the module that hooks up to 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')
}

the webpack.config.cjs file:

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()]

}

the 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"
  }

'npx webpack server' output:

(venv) root@abda:/home/abd_p1# npx webpack server
ℹ 「wds」: Project is running at http://0.0.0.0:808/
ℹ 「wds」: webpack output is served from /
ℹ 「wds」: Content not from webpack is served from /home/abd_p1/homepage/static/js
ℹ 「wdm」: asset abda_bundle.js 400 KiB [emitted] (name: main) 1 related asset
runtime modules 26.8 KiB 12 modules
modules by path ./node_modules/ 339 KiB
  modules by path ./node_modules/webpack-dev-server/ 21.2 KiB
    modules by path ./node_modules/webpack-dev-server/client/ 20.9 KiB 10 modules
    modules by path ./node_modules/webpack-dev-server/node_modules/ 296 bytes 2 modules
  modules by path ./node_modules/webpack/hot/ 4.46 KiB 5 modules
  modules by path ./node_modules/html-entities/lib/*.js 61 KiB 5 modules
  modules by path ./node_modules/url/ 37.4 KiB 3 modules
  modules by path ./node_modules/querystring/*.js 4.51 KiB 3 modules
  4 modules
modules by path ./homepage/static/js/ 5.7 KiB
  ./homepage/static/js/publish.js 5.06 KiB [built] [code generated]
  ./homepage/static/js/options.mjs 654 bytes [built] [code generated]
webpack 5.46.0 compiled successfully in 391 ms
ℹ 「wdm」: Compiled successfully.
ℹ 「wdm」: Compiling...
ℹ 「wdm」: asset abda_bundle.js 400 KiB [emitted] (name: main) 1 related asset
asset main.0fffa7602b5d577ef82c.hot-update.js 1.6 KiB [emitted] [immutable] [hmr] (name: main) 1 related asset
asset main.0fffa7602b5d577ef82c.hot-update.json 28 bytes [emitted] [immutable] [hmr]
Entrypoint main 401 KiB (452 KiB) = abda_bundle.js 400 KiB main.0fffa7602b5d577ef82c.hot-update.js 1.6 KiB 2 auxiliary assets
cached modules 344 KiB [cached] 33 modules
runtime modules 26.8 KiB 12 modules
./homepage/static/js/options.mjs 655 bytes [built] [code generated]
webpack 5.46.0 compiled successfully in 98 ms
ℹ 「wdm」: Compiled successfully.
abda
  • 11
  • 2

0 Answers0