sails-hook-webpack

Webpack asset pipeline hook for Sails.

1. Install

npm install sails-hook-webpack --save

You will also need webpack and webpack-dev-server installed in your project.

npm i webpack webpack-dev-server --save

2. Configure

a. Disable the sails grunt hook.

// .sailsrc
{
  "hooks": {
    "grunt": false
  }
}

Optionally, you can also remove the default Sails tasks directory and the Gruntfile.js.

b. Set your environment variable.

By default, Sails (and express) sets NODE_ENV=development. 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.

NODE_ENV	webpack mode	description
development	webpack.watch()	Rebuilds on file changes during runtime
staging or production	webpack.run()	Build bundle once on load.

c. Configure Webpack

This hook uses the standard Webpack Configuration.

Below is an example of the webpack configuration file. PROJECT_DIR/config/webpack.js

// config/webpack.js
import webpack from 'webpack';
 
export default {
  webpack: {
    config: { },  // webpack config here
    development: { // dev server config
      webpack: { }, // separate webpack config for the dev server or defaults to the config above
      config: { // webpack-dev-server-config
        port: 3000
      }
    },
    watchOptions: {
      aggregateTimeout: 300
    }
  }
};

ES5:

// config/webpack.js
var webpack = require('webpack');
 
module.exports.webpack = {
    config: { },  // webpack config here
    development: { // dev server config
      webpack: { }, // separate webpack config for the dev server or defaults to the config above
      config: { // webpack-dev-server-config
        port: 3000
      }
    },
    watchOptions: {
      aggregateTimeout: 300
    }
};

3. Lift!

sails lift

Events

This hook provides events that can be listened to by using sails.on(..event, ..fn)

• 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.

sails-linker

To replicate sails-linker functionality, check out our linker-webpack-plugin.

License

MIT

Maintained By

• Mike Diarmid