Hey there !

After a long time, i've found the solution !

This one can reload the page during modifications. This script is probrably optimizable but it's work fine for me.

Feel free to get this one if you would try it.

You can (finally) close this issues ;)

const path = require('path');
const removeEmptyScriptsPlugin = require('webpack-remove-empty-scripts');
const webpackConfig = require('@wordpress/scripts/config/webpack.config');

module.exports = {
    ...webpackConfig,
    mode: 'development', // Use development mode
    devServer: {
        static: {
            directory: path.join(__dirname, 'assets'),
        },
        client: {
            overlay: false,
        },
        open: true,
        liveReload: true,
        hot: false,
        compress: true,
        devMiddleware: {
            writeToDisk: true,
        },
        proxy: {
            '/': {
                target: 'http://mysite.local', // URL of your local WordPress site
                changeOrigin: true,
            },
        },
        watchFiles: {
            paths: ['**/*.php'], // Watch PHP files for reloading
            options: {
                ignored: /node_modules/,
            },
        },
        port: 8080, // Port for the Webpack development server
    },
    context: path.resolve(__dirname, 'assets'),
    entry: ['./main.js', './main.scss'],
    plugins: [
        ...webpackConfig.plugins,
        new removeEmptyScriptsPlugin({
            stage: removeEmptyScriptsPlugin.STAGE_AFTER_PROCESS_PLUGINS,
        }),
    ],
};

Problem with the webpack config #31

Description

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions