Sails: is it possible to use webpack as build system?

Created on 2 Mar 2017 · 6Comments · Source: balderdashy/sails

Greetings, all:

our team decided to use sails, and find it is a awesome project, but we are using webpack before, and nobody familiar with grunt, so i want to know if sails is able to use webpack as build system.

BTW, the most important reason we want to use webpack is we need hot reload, we found an issue #3659 , but can not play well.

Thanks a lot for any idea!

needs cleanup question

Source

astwyg

👍1

All 6 comments

Hi @astwyg! It looks like you may have removed some required elements from the initial comment template, without which I can't verify that this post meets our contribution guidelines. To re-open this issue, please copy the template from here, paste it at the beginning of your initial comment, and follow the instructions in the text. Then post a new comment (e.g. "ok, fixed!") so that I know to go back and check.

Sorry to be a hassle, but following these instructions ensures that we can help you in the best way possible and keep the Sails project running smoothly.

*If you feel this message is in error, or you want to debate the merits of my existence (sniffle), please contact [email protected]

sailsbot on 2 Mar 2017

Hey @astwyg, I have a working setup with Webpack 2 and Sails 0.12. It does support hot reloading in development mode. I chose to add the webpack middleware for hot reloading directly to the top of Sails' middleware stack using a hook (api/hooks/webpack.js):

/**
 * Add webpack-dev-middleware and webpack-hot-middleware to sails middleware stack.
 */

module.exports = function webpackHook(sails) {
  if (process.env.NODE_ENV === 'production') return {};

  return {

    configure: () => {
      const webpack = require('webpack');
      const webpackDevMiddleware = require("webpack-dev-middleware");
      const webpackHotMiddleware = require("webpack-hot-middleware");

      const webpackConfig = require('../../webapp/webpack/config.development');

      const compiler = webpack(webpackConfig);

      const middleware = sails.config.http.middleware;

      middleware.webpackDevMiddleware = webpackDevMiddleware(compiler, {
        publicPath: webpackConfig.output.publicPath,
        noInfo: true,
        stats: {
          colors: true
        }
      });
      middleware.webpackHotMiddleware = webpackHotMiddleware(compiler);

      middleware.order.unshift('webpackDevMiddleware', 'webpackHotMiddleware');
    }

  };
};

webpackConfig.output.publicPath is an empty string, so the dev-middleware can also serve the index.html file.

In addition, in development mode webpack-hot-middleware/client is added to the beginning of the entry-array in the Webpack config, just after react-hot-loader/patch which you do not need if you are not using React:

config.entry.main.unshift(
  'react-hot-loader/patch',
  'webpack-hot-middleware/client'
);

And, also in development mode, these plugins are added:

config.plugins.unshift(
  new webpack.HotModuleReplacementPlugin(),
  new webpack.NamedModulesPlugin(),
  new webpack.NoEmitOnErrorsPlugin()
);

skleeschulte on 3 Mar 2017

👍1

@skleeschulte 👍

mikermcneil on 6 Mar 2017

👍1

@skleeschulte thanks very much!

astwyg on 7 Mar 2017

Sorry to be a hassle, but following these instructions ensures that we can help you in the best way possible and keep the Sails project running smoothly.

*If you feel this message is in error, or you want to debate the merits of my existence (sniffle), please contact [email protected]

sailsbot on 7 Mar 2017

@skleeschulte i have some trouble in using your setting ,are you ok to show your sails version,and webpack configs,my project is sails and user react as front views ,i want auto reload the views,but now my settings only rebuild,but not reload.

/* eslint func-names: off */
module.exports = function (sails) {

  return {
    configure: function configure() {
      const config = sails.config;
      if (sails.config.environment !== 'production' && !config.webpack) {
        sails.log.warn('sails-webpack: no Webpack "options" are defined.');
        sails.log.warn('sails-webpack: Please configure config/webpack.js');
      }
    },

    initialize: function initialize(cb) {
      if (sails.config.environment === 'development') {
        // const compiler = webpack(_.extend({}, sails.config.webpack.options));
        const compiler = webpack({ ...sails.config.webpack.options });
        compiler.apply(new ProgressPlugin((percentage, msg) => {
          const lineBreak = percentage === 1 ? '\n' : '';
          process.stdout.write(`\r webpack progress: ${(percentage * 100).toFixed(0)}%${lineBreak}`);
        }));
        sails.after('lifted', () => {
          // compiler.watch(_.extend({}, sails.config.webpack.watchOptions), afterBuild);
          compiler.watch({ ...sails.config.webpack.watchOptions }, afterBuild);
          compiler.plugin('done', () => {
            if (precompileHandler) {
              gLogger.debug('re-build ServicesKeeper.js')
              precompileHandler();
              precompileHandler = null;
            }
          });
          sails.log.info(webpack && webpack.version ? `use webapck v${webpack.version} to build app` : '')
          sails.log.info('webpack: watching...');
        });

        return cb();
      }
      return cb();
    }
  };
};