How to run webpack build with watch install#
How to run webpack build with watch generator#
How to run webpack build with watch series#

Classifying both Gulp and Webpack as вЂњbuild toolsвЂќ will make it sound redundant to use both, but in this case the two work great together. Wisdom lies in using the right tool for the job. When using the site with ForestryвЂ™s instant previews, you can just set the instant preview command to npm run develop. Now, when we run npm run develop, it will start the development server, building both the Webpack assets and the Hugo site in a single sequence.

How to run webpack build with watch install#

To add Gulp to your project, simply install it through NPM like so:ДЇunction assets ( cb ) Since you already have a Webpack build configured, itвЂ™s safe to assume you already have Node and NPM in your environment, and your project already has a package.json file with your Webpack dependencies.

How to run webpack build with watch generator#

If you are using a different static site generator such as Jekyll, keep reading: this will be easy to adapt to several different SSGs. Getting Started With GulpДЇor the purposes of this tutorial, letвЂ™s assume you have a Hugo site that uses Webpack to build assets. I kicked off that Webpack article discussing tool fatigue, so I can imagine how you feel right now: I need another build tool to run my build tool?

Sure enough, Gulp fits the bill perfectly here.Д«efore we go any further, take a deep breath.

How to run webpack build with watch series#

This shouldnвЂ™t be that hard: whatвЂ™s a good tool that will allow me to orchestrate a series of commands, watch files for changes, and run a development server? To help assist in the adoption of instant previews for users who incorporate Webpack or another asset processing tool, I searched for a simple solution that could be applied to a variety of use cases. Unfortunately, some of those imperfect-but-usable solutions that have worked in developersвЂ™ preview environments donвЂ™t work so great with instant previews - running multiple commands isnвЂ™t straightforward, and multiple parallel commands might lead to race conditions.

With Instant Previews, Forestry is able to run your static site generatorвЂ™s development server in our cloud preview environment, drastically reducing the time it takes to rebuild your preview. Many developers have found creative solutions to this problem, which I learned while we were beta testing our brand new Instant Previews feature. A slightly inelegant solution, but perfectly serviceable. For the most part this is a pretty minor inconvenience: your deployment script could just run the commands separately, and maybe in your development environment you could run WebpackвЂ™s watch command and your SSGвЂ™s dev server in separate terminal windows.

You have one tool building your JavaScript and CSS, and another tool building your siteвЂ™s HTML. One issue with any asset pipeline, though, comes up when using it alongside a static site generator. This makes Gulp a less attractive option for packaging your JavaScript files. I contrasted Webpack with Gulp, a stream processor and taskrunner utility that, while it has its place, doesnвЂ™t do the sophisticated module bundling that Webpack does. This is because Webpack allows you to write modular JavaScript for the browser, and handles the dependency resolution and file bundling. Once upon a time, I told you that Webpack was an excellent tool for managing JavaScript in your web projects.