How can I recompile js file in dist folder?

I'm working on a project that loads a minified js file from my theme into a page script type='text/javascript' src='http://localhost/mysite/wp-content/themes/mytheme-2021/dist/app.js?ver=5.9' id='app-js'/script

I have a webpack.mix.js file in my theme root directory:

let mix = require('laravel-mix');

const dist = `dist`

mix
  .options({ processCssUrls: false })
  .copyDirectory('resources/fonts', dist)
  .copyDirectory('resources/images', dist)
  .js('resources/js/app.js', dist)
  .sass('resources/sass/app.sass', dist);

and a package.json

{
  dependencies: {
    laravel-mix: ^6.0.6,
    normalize-scss: ^7.0.1,
    reset-css: ^5.0.1,
    sass-mq: ^5.0.1
  },
  devDependencies: {
    sass: ^1.37.5,
    sass-loader: ^12.1.0
  }
}

I've made changes to the resources/js/app.js file and I'm trying to understand how can I make the app rebuild the file? I've tried from command line npx webpack but without success. Maybe it's done via a plugin?

Can anyone explain how is this thing working? Thanks in advance

Topic wp-dependencies functions Wordpress

Category Web


It appears that calling the following from your theme folder should do the job:

npm install
npm run build

Source: "How to Use Webpack in WordPress".

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.