So, hello world, or hello DEV - I wanted an excuse to make my first post on here, so I'm just going to quickly explain my latest little joy in development from this morning. I hope it can be of use to someone!
I've been using WebPack with a fair amount of success over the last month or so, to the point where I don't really think about it all that much any more, it just works. If you've yet to find success with WebPack, I highly recommend this YouTube series on it from Academind which taught me everything I needed, with a little help from the comments section (yes, sometimes it's actually useful rather than infuriating)
If you do already use WebPack, then chances are you also use it's buddy, Webpack-Dev-Server, which operates like an always-on build and lets you see live changes in your source files as if they had been built. This has been working fantastically for me so far, however I've only been developing with desktop in mind until yesterday where I was asked to make sure everything works on mobile.
I had a little experience with this kind of thing in the past - I've made nodemon and express expose files on LAN. As it turns out, you can do the exact same thing here. Some googling lead me to this closed issue on the WebPack-Dev-Server GitHub repository which divulged the required magic spell to be input into your command line or package.json start script...
$ webpack-dev-server --port 8080 --hot --host 0.0.0.0
By setting the IP to 0.0.0.0 you are targeting your machine and revealing your server to the local network. You can then view your site via any device on your local network by navigating to your computer's local IP (howto: windows/mac) followed by :8080 or whatever you chose to set the port to above. In my case it was http://192.168.1.51:8080
You'll also notice the --hot option being used above. This means that as you make updates on your machine, it will trigger a refresh on the device you're monitoring from - or at least that's what it's supposed to do in theory, I found it was a bit patchy meaning I have to either restart the server or tap refresh on my iPad like a peasant.
Let me know if you have any other webpack related tips, I'm new to this and am really interested to hear of any other cool features I might not yet have explored.
Top comments (0)