Problem with the webpack config

[amarineau]

When i start with the npm run watch command. It's opening the listing directory on my browser.

I've got no "error" or something visual display.

The npm install is ok.

I tried to add a publicPath for the output but nothing change.

Any idea ?

[them-es]

This issue is hard to reproduce without knowing your local server setup.

1. The theme needs to be extracted in {localhost}/wp-content/themes/my-bootstrap-theme
2. The theme needs to be activated in your WordPress instance via {localhost}/wp-admin/themes.php

After running npm run watch you should see something like

[webpack-dev-server] Project is running at:
[webpack-dev-server] Loopback: http://localhost:8080/
...
[webpack-dev-server] Content not from webpack is served from '/{localhost}/wp-content/themes/my-bootstrap-theme/assets' directory

(!) Ignore the provided [webpack-dev-server] urls. Instead just open your WordPress instance in the browser as you would do normally e.g. http://localhost/my-wordpress-site and everything should work out of the box - even the live reload after changing the assets files.

Hope this helps!

[amarineau]

I've 2 local server configurations, first one with phpmonitor (valet) and the other one is Local.

But same same with my problem.

So my URI for check the site is http://test.local/

I don't understand why my configuration may be a problem.

In fact, i can check the wordpress when i use this http://test.local/ but the hot reloading doesn't work when I modify something in the theme's files.

[them-es]

Just tested it on a Local installation (https://localwp.com - latest version). Everything seems to work fine and the site is autorefreshing after modifying main.scss. Just to be clear. Hot reloading only works when updating a frontend file like .scss/.js in the /assets directory. It will not work with .php files, etc.

This issue already has been labeled as help wanted so maybe someone else from the community knows a solution to your problem.

[amarineau]

Yeah was clear :)

Just a last things. Which version of node are you using ?

[them-es]

Just a last things. Which version of node are you using ?

Latest version

[them-es]

Hi @amarineau,

if this issue is still relevant, could you try to define your localhost URL via the devServer open option?

devServer: {
    static: {
        directory: path.join(__dirname, "assets"),
    },
    client: {
        overlay: false,
    },
    open: [ 'http://localhost/starter-bootstrap' ], // Add your localhost URL here
    liveReload: true,
    hot: false,
    compress: true,
    devMiddleware: {
        writeToDisk: true,
    },
},

[amarineau]

Hi !

Thanks for your feedback and i tried add the open but nothing change. No self reload when i change something ...

Think i've a problem between my config of LocalWP and webpack.

I probably must use the "localhost" instead of "Site domains" for the router mode in LocalWP.

Edit: Yes it's :) !! But i don't really understand why doesn't work with "Site domains".

[them-es]

Did you try to add your actual site domain (i.e. http://test.local/, etc.) in open?

And could you confirm that after switching to localhost everything is working now? If so, we'll update the webpack config to include the additional open option.

Thanks in advance!

[amarineau]

Yes i tried but no results and i can confirm when i switch for localhost modifications on assets/* are reload automatically.

It's a good way to add the open to force the great localhost port but i think webpack have probably a deep solution to use a local site name and localhost together but i'm not used to it.

Thanks for your resarch and feedbacks

Great job in it !

[amarineau]

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,
        }),
    ],
};

[them-es]

Awesome. Thanks for posting your workaround @amarineau - this may be helpful to others!