Thanks to an excellent answer by @McMath I now have webpack compiling both my client and my server. I'm now on to trying to make webpack --watch
be useful. Ideally I'd like to have it spawn something like nodemon for my server process when that bundle changes, and some flavor of browsersync for when my client changes.
I realize it's a bundler/loader and not really a task runner, but is there some way to accomplish this? A lack of google results seems to indicate I'm trying something new, but this must have been done already..
I can always have webpack package to another directory and use gulp to watch it/copy it/browsersync-ify it, but that seems like a hack.. Is there a better way?
Other Ways to Enable Watch Mode You can also enable watch mode from your Webpack config file: module. exports = { mode: 'development', watch: true, // Enable watch mode entry: { app: `${__dirname}/app. js` }, target: 'web', output: { path: `${__dirname}/bin`, filename: '[name].
Using Watch Mode You can instruct webpack to "watch" all files within your dependency graph for changes. If one of these files is updated, the code will be recompiled so you don't have to run the full build manually. Now run npm run watch from the command line and see how webpack compiles your code.
npm install npm-run-all webpack nodemon
package.json
file to something as seen below:package.json
{ ... "scripts": { "start" : "npm-run-all --parallel watch:server watch:build", "watch:build" : "webpack --watch", "watch:server" : "nodemon \"./dist/index.js\" --watch \"./dist\"" }, ... }
After doing so, you can easily run your project by using npm start
.
Don't forget config WatchIgnorePlugin for webpack to ignore ./dist
folder.
npm-run-all
- A CLI tool to run multiple npm-scripts in parallel or sequential.webpack
- webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset. nodemon
- Simple monitor script for use during development of a node.js app.If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With