webpack.config.js

'use strict';

const fs = require('fs');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const DRGBootstrapSASSPlugin = require('drg-bootstrap-sass');

const prod = process.argv.indexOf('-p') !== -1;
const CSS_OUTPUT_TEMPLATE = prod ? 'app/assets/stylesheets/[name]-[hash].css' : 'stylesheets/[name].css';
const JS_OUTPUT_TEMPLATE = prod ? 'app/assets/javascripts/[name]-[hash].js' : 'javascripts/[name].js';
const FONT_OUTPUT_TEMPLATE = prod ? 'app/assets/fonts/[name]-[hash].[ext]' : 'fonts/[hash].[ext]';
const IMG_OUTPUT_TEMPLATE = prod ? 'app/assets/images/[name]-[hash].[ext]' : 'images/[hash].[ext]';

module.exports = {
  context: __dirname + '/',

  entry: {
    application: [
      './app/assets/javascripts/application.js',
      './app/assets/stylesheets/application.scss',
    ]
  },

  output: {
    path: __dirname + '/public',
    filename: JS_OUTPUT_TEMPLATE
  },

  module: {
    loaders: [{
      test: /bootstrap\/js\//,
      loader: 'imports?jQuery=jquery'
    }, {
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel-loader',
      query: {
        presets: ['es2015']
      }
    }, {
      test: /\.(css|scss)$/,
      loader: ExtractTextPlugin.extract('css-loader!sass-loader')
    },
    {
      test: /\.woff(2)?(\?v=\d+\.\d+\.\d+)?$/,
      loader: 'url-loader',
      query: {
        limit: 10000,
        mimetype: 'application/font-woff',
        name: FONT_OUTPUT_TEMPLATE,
        publicPath: '/'
      }
    }, {
      test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
      loader: 'url-loader',
      query: {
        limit: 10000,
        mimetype: 'application/octet-stream',
        name: FONT_OUTPUT_TEMPLATE,
        publicPath: '/'
      }
    }, {
      test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
      loader: 'file-loader',
      query: {
        name: FONT_OUTPUT_TEMPLATE,
        publicPath: '/'
      }
    },
    {
      test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
      loader: 'url-loader',
      query: {
        limit: 10000,
        mimetype: 'image/svg+xml',
        name: IMG_OUTPUT_TEMPLATE,
        publicPath: '/'
      }
    },
    {
      test: /\.png(\?v=\d+\.\d+\.\d+)?$/,
      loader: 'url-loader',
      query: {
        limit: 10000,
        mimetype: 'image/png',
        name: IMG_OUTPUT_TEMPLATE,
        publicPath: '/'
      }
    }]
  },

  plugins: [
    new ExtractTextPlugin(CSS_OUTPUT_TEMPLATE),
    function() {
      // Delete previous assets
      this.plugin('compile', function() {
        let basepath = __dirname + 'public';
        let paths = ['/javascripts', '/stylesheets', '/fonts', '/images'];

        for (let x = 0; x < paths.length; x++) {
          const asset_path = basepath + paths[x];

          fs.readdir(asset_path, function(err, files) {
            if (files === undefined) {
              return;
            }

            for (let i = 0; i < files.length; i++) {
              fs.unlinkSync(asset_path + '/' + files[i]);
            }
          });
        }
      });

      // Pass rails the fingerprint
      this.plugin('done', function(stats) {
        const output = 'ASSET_FINGERPRINT = "' + stats.hash + '"';
        fs.writeFileSync('config/initializers/fingerprint.rb', output, 'utf8');
      });
    },
    function() {
      this.plugin('compile', DRGBootstrapSASSPlugin(__dirname));
    },
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery'
    })
  ]
}