Have ideas to improve npm?Join in the discussion! »

    sails-hook-webpack

    2.0.4 • Public • Published

    sails-hook-webpack

    NPM version Build status Dependency Status

    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

    Install

    npm i sails-hook-webpack

    DownloadsWeekly Downloads

    170

    Version

    2.0.4

    License

    MIT

    Last publish

    Collaborators

    • avatar