Local and Webpack Dev Server (or Grunt or Gulp Servers)

Support
1

Hi,

I would like to use Webpack Dev Server to live reload the page, but use Local to host the WordPress install. I imagine the same solution would work for Grunt or Gulp as well with maybe slightly different configurations.

Anyone have experience getting both of these to work together?

Thanks!

2

Hey Zac!

You can definitely make the two work together!

With the webpack dev server you’ll most likely want to use the proxy functionality.

If you’re using something more simple like LiveReload JS you just need to make sure LiveReload JS points to localhost as the server.

If you have any other questions please let me know.

1 Like
3

Hi Zac, did you ever get this working? I’m using BrowserSync with Webpack and it’s very sluggish…

Cheers
Damian

4

Hey, @zgordon ! :wave:

I developed WPGulp (I think it’s the most popular gulp utility for WordPress). Take a look and use it. BrowserSync works just fine with local and WPGulp.

I’m also about to release a Webpack boilerplate to help people get started, but I am trying to not make it a stale start kit but a versioned updated utility.

:point_right: And BTW we’ve been working towards an extra-ordinary new build from scratch. Which will be cached for better results, ES6 Support, and a lot more. Take a look → :rocket: WPGulp 2.0 Goals + Call for Contributors! #61. Feel free to join in.

Let me know of you have any questions. :raised_hands:

1 Like
5

I’m also trying to setup Webpack to hot reload on my site.local address with localByFlywheel. Would you have a webpack.config.js with the proxy settings and a package.json example with the dev dependencies of a simple setup to process sass and js? Maybe a github repo to helps us out?

6

Hey @TiagoPires –

There isn’t an official “Local way” of doing this, but I’ve had success using the Sage Starter theme which uses WebPack.

The folder structure may seem a little odd if you are used to having the build config in the main folder, but Sage puts the actual webpack config in resources/assets/build: https://github.com/roots/sage/tree/master/resources/assets/build

Note that WebPack is making use of the values set in the resources/assets/config.json https://github.com/roots/sage/blob/master/resources/assets/config.json

If you are hand building the WebPack config – that’s definitely tricky, but you’ll learn a lot! I’d say take Sage for a spin and see how you like it. There might be some gems that can be used in your own project.

– Ben

7

Hey @ben.turner

Just had a look. This theme is using “webpack”: “~3.10.0”, while I’m trying to run Wenpack 4.Surprise it’s been hard to find a repo or tutorials with an example setup to use Local and Webpack dev server side by side, such popular tools. I’ll have a look at this example (quite full on!). Thanks!

8

Hi @mrahmadawais

I need to use Webpack 4 and Local. Could be with Webpack dev server or browsersync to hot reload. Just cannot find examples. I got as far as the proxy working, but no luck with hot reload.

If you have any repo with an example setup, it would be awesome.

thanks!

9

@TiagoPires Did you ever find an example of how to do this? I’m trying to do the same except I’m using Webpack Mix based on this.

10

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.