Webpack asset pipeline hook for Sails.
npm install sails-hook-webpack --save
You will also need
webpack-dev-server installed in your project.
npm i webpack webpack-dev-server --save
a. Disable the sails grunt hook.
// .sailsrc"hooks":"grunt": false
Optionally, you can also remove the default Sails
tasksdirectory and the
b. Set your environment variable.
By default, Sails (and express) sets
With this setting, webpack in dev will watch for changes in the directories you specify in your
config/webpack.js. In prod webpack will just run your webpack configuration.
||Rebuilds on file changes during runtime|
||Build bundle once on load.|
c. Configure Webpack
This hook uses the standard Webpack Configuration.
Below is an example of the webpack configuration file.
// config/webpack.js;webpack:config: // webpack config heredevelopment: // dev server configwebpack: // separate webpack config for the dev server or defaults to the config aboveconfig: // webpack-dev-server-configport: 3000watchOptions:aggregateTimeout: 300;
// config/webpack.jsvar webpack = ;moduleexportswebpack =config: // webpack config heredevelopment: // dev server configwebpack: // separate webpack config for the dev server or defaults to the config aboveconfig: // webpack-dev-server-configport: 3000watchOptions:aggregateTimeout: 300;
This hook provides events that can be listened to by using
- hook:sails-hook-webpack:compiler-ready - emitted when the compiler is initialised and ready, usually after the first build event.
- hook:sails-hook-webpack:after-build - emitted after each webpack build, the event data includes the webpack build stats.