theme development – How to Enable Hot Module Replacement with Webpack


I am using wordpress user/scripts to set up WordPress with Webpack in a WordPress theme. The current configuration works fine and compiles the scss and js files from the src folder when I run npm run start. However it does not auto refresh the page when the files are updated. I am using this configuration to develop on my local LAMP installation. How I can do page auto reload when the files are updated? Here is the Webpack configuration I am currently using:


 * External Dependencies
const path = require( 'path' );
const FixStyleOnlyEntriesPlugin = require( 'webpack-fix-style-only-entries' );
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );

 * WordPress Dependencies
const defaultConfig = require( 'wordpress user/scripts/config/webpack.config.js' );

module.exports = {
        entry: {
            main: path.resolve( process.cwd(), 'src/scss', 'main.scss' ),
            app: path.resolve( process.cwd(), 'src/js', 'app.js' ),
    plugins: [ new FixStyleOnlyEntriesPlugin(), new MiniCssExtractPlugin() ],

Badan 2 months 2022-12-05T04:36:01-05:00 0 Answers 0 views 0

Leave an answer