Development tools

We can utilize some handy development tools to improve our frontend workflow, including:

• Watch mode
• BrowserSync

Watch mode

So far, we've been running builds of our app manually using npm run dev every time we make a change. Webpack also has a watch mode where it automatically runs a build when a dependency changes. Thanks to the design of Webpack, it is able to efficiently complete these automatic builds by only rebuilding modules that have changed.

To use watch mode, run the watch script included in package.json:

$ npm run watch

To test that it works, add this at the bottom of resources/assets/js/app.js:

console.log("Testing watch");

If watch mode is running correctly, saving this file will trigger a build, and you'll see updated build statistics in the Terminal. If you then refresh the page you'll see the Testing watch message in the console.

To turn off watch mode, press Ctrl + C in the Terminal. It can then be restarted at any time. Don't forget to remove the console.log once...