theme development – How to Enable Hot Module Replacement with Webpack

Question

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:

webpack.config.js

/**
 * 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 = {
    ...defaultConfig,
    ...{
        entry: {
            main: path.resolve( process.cwd(), 'src/scss', 'main.scss' ),
            app: path.resolve( process.cwd(), 'src/js', 'app.js' ),
        },
    },
    plugins: [ new FixStyleOnlyEntriesPlugin(), new MiniCssExtractPlugin() ],
};

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

Leave an answer

Browse
Browse