Skip to content
Webpack asset pipeline hook for Sails.
Branch: master
Clone or download
Pull request Compare This branch is 46 commits ahead of weyj4:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


NPM version Build status Dependency Status

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 Rebuilds on file changes during runtime
staging or production 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: [
    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:
  watchOptions: {
    aggregateTimeout: 300

3. Update your Layout

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

4. Lift!

$ sails lift



Maintained By

You can’t perform that action at this time.