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
2 months
2022-12-05T04:36:01-05:00
2022-12-05T04:36:01-05:00 0 Answers
0 views
0
Leave an answer