Sails-webpack NPM

-webpack

Webpack asset pipeline hook for Sails.

This package was last updated in 2015. For the most up-to-date information and tools related to Webpack in Sails, visit the official Sails website or ask for help. Specifically, you might find this article on disabling Grunt helpful.

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');

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