Lidarr/frontend/gulp/webpack.js

const _ = require('lodash');
const gulp = require('gulp');
const simpleVars = require('postcss-simple-vars');
const nested = require('postcss-nested');
const autoprefixer = require('autoprefixer');
const webpackStream = require('webpack-stream');
const livereload = require('gulp-livereload');
const path = require('path');
const webpack = require('webpack');
const errorHandler = require('./helpers/errorHandler');
const reload = require('require-nocache')(module);
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const uiFolder = 'UI';
const root = path.join(__dirname, '..', 'src');
const isProduction = process.argv.indexOf('--production') > -1;

console.log('ROOT:', root);
console.log('isProduction:', isProduction);

const cssVariables = [
  '../src/Styles/Variables/colors',
  '../src/Styles/Variables/dimensions',
  '../src/Styles/Variables/fonts',
  '../src/Styles/Variables/animations'
].map(require.resolve);

const config = {
  devtool: '#source-map',
  stats: {
    children: false
  },
  watchOptions: {
    ignored: /node_modules/
  },
  entry: {
    preload: 'preload.js',
    vendor: 'vendor.js',
    index: 'index.js'
  },
  resolve: {
    root: [
      root,
      path.join(root, 'Shims'),
      path.join(root, 'JsLibraries')
    ]
  },
  output: {
    filename: path.join('_output', uiFolder, '[name].js'),
    sourceMapFilename: '[file].map'
  },
  plugins: [
    new ExtractTextPlugin(path.join('_output', uiFolder, 'Content', 'styles.css'), { allChunks: true }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor'
    }),
    new webpack.DefinePlugin({
      __DEV__: !isProduction,
      'process.env': {
        NODE_ENV: isProduction ? JSON.stringify('production') : JSON.stringify('development')
      }
    })
  ],
  resolveLoader: {
    modulesDirectories: [
      'node_modules',
      'gulp/webpack/'
    ]
  },
  eslint: {
    formatter: function(results) {
      return JSON.stringify(results);
    }
  },
  module: {
    loaders: [
      {
        test: /\.js?$/,
        exclude: /(node_modules|JsLibraries)/,
        loader: 'babel',
        query: {
          plugins: ['transform-class-properties'],
          presets: ['es2015', 'decorators-legacy', 'react', 'stage-2'],
          env: {
            development: {
              plugins: ['transform-react-jsx-source']
            }
          }
        }
      },

      // CSS Modules
      {
        test: /\.css$/,
        exclude: /(node_modules|globals.css)/,
        loader: ExtractTextPlugin.extract('style', 'css-loader?modules&importLoaders=1&sourceMap&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader')
      },

      // Global styles
      {
        test: /\.css$/,
        include: /(node_modules|globals.css)/,
        loader: 'style!css-loader'
      },

      // Fonts
      {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'url?limit=10240&mimetype=application/font-woff&emitFile=false&name=Content/Fonts/[name].[ext]'
      },
      {
        test: /\.(ttf|eot|eot?#iefix|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'file-loader?emitFile=false&name=Content/Fonts/[name].[ext]'
      }
    ]
  },
  postcss: function(wpack) {
    cssVariables.forEach(wpack.addDependency);

    return [
      simpleVars({
        variables: function() {
          return cssVariables.reduce(function(obj, vars) {
            return _.extend(obj, reload(vars));
          }, {});
        }
      }),
      nested(),
      autoprefixer({
        browsers: [
          'Chrome >= 30',
          'Firefox >= 30',
          'Safari >= 6',
          'Edge >= 12',
          'Explorer >= 10',
          'iOS >= 7',
          'Android >= 4.4'
        ]
      })
    ];
  }
};

gulp.task('webpack', () => {
  return gulp.src('index.js')
    .pipe(webpackStream(config))
    .pipe(gulp.dest(''));
});

gulp.task('webpackWatch', () => {
  config.watch = true;
  return gulp.src('')
    .pipe(webpackStream(config))
    .on('error', errorHandler)
    .pipe(gulp.dest(''))
    .on('error', errorHandler)
    .pipe(livereload())
    .on('error', errorHandler);
});