README.md

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$/, loader: 'babel-loader' },
        { test: /\.css$/, loaders: ['style-loader', 'css-loader'] }
      ]
    }
  },

  // Suppress errors/warnings from the sails-webpack hook.
  // Since webpack displays its own errors, these settings are helpful to
  // reduce console clutter.
  suppressErrors: true,
  suppressWarnings: true,

  // 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