sails-webpack

Webpack asset pipeline hook for Sails.

1. Install

$ npm install sails-webpack --save

2. Configure

a. Disable the built-in Grunt hook

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

b. Set your environment.

By default, Sails (and express) sets NODE_ENV=development. In this setting, webpack will watch for changes in the directories you specify in your config/webpack.js.

| 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 standard Webpack Configuration. Below is an example of using webpack to compile a React.js application located in assets/js/.

// config/webpack.js

var webpack = require('webpack');
var path = require('path');

// compile js assets into a single bundle file
module.exports.webpack = {
  options: {
    devtool: 'eval',
    entry: [
      './assets/js',
    ],
    output: {
      path: path.resolve(__dirname, '../.tmp/public/js'),
      filename: 'bundle.js'
    },
    plugins: [
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NoErrorsPlugin()
    ],
    module: {
      loaders: [
        // requires "npm install --save-dev babel-loader"
        { test: /\.js$/, loaders: ['babel-loader?stage=0'] },
        { test: /\.css$/, loader: 'style!css' }
      ]
    }
  },

  // docs: https://webpack.github.io/docs/node.js-api.html#compiler
  watchOptions: {
    aggregateTimeout: 300
  }
};

3. Update your Layout

<!-- views/layout.ejs -->
<script src="/js/bundle.js"></script>

4. Lift!

$ sails lift

License

MIT

Maintained By

• Joey Di Nardo
• Weyland Joyner
• Travis Webb