Lidarr/frontend/gulp/webpack.js

const gulp = require('gulp');
const webpackStream = require('webpack-stream');
const livereload = require('gulp-livereload');
const path = require('path');
const webpack = require('webpack');
const errorHandler = require('./helpers/errorHandler');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-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 cssVarsFiles = [
  '../src/Styles/Variables/colors',
  '../src/Styles/Variables/dimensions',
  '../src/Styles/Variables/fonts',
  '../src/Styles/Variables/animations'
].map(require.resolve);

const extractCSSPlugin = new ExtractTextPlugin({
  filename: path.join('_output', uiFolder, 'Content', 'styles.css'),
  allChunks: true,
  disable: false,
  ignoreOrder: true
});

const plugins = [
  extractCSSPlugin,

  new OptimizeCssAssetsPlugin({}),

  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor'
  }),

  new webpack.DefinePlugin({
    __DEV__: !isProduction,
    'process.env.NODE_ENV': isProduction ? JSON.stringify('production') : JSON.stringify('development')
  })
];

function babelPlugins() {

  const bplugins = [];

  bplugins.push(
    '@babel/plugin-proposal-class-properties',
    '@babel/plugin-syntax-dynamic-import',
    '@babel/plugin-syntax-import-meta',
    '@babel/plugin-proposal-json-strings',
    [
      '@babel/plugin-proposal-decorators',
      {
        legacy: true
      }
    ],
    '@babel/plugin-proposal-function-sent',
    '@babel/plugin-proposal-export-namespace-from',
    '@babel/plugin-proposal-numeric-separator',
    '@babel/plugin-proposal-throw-expressions'
  );

  if (process.env.NODE_ENV !== 'production') {
    bplugins.push('@babel/transform-react-jsx-source');
  }

  if (process.env.NODE_ENV === 'production') {
    bplugins.push('transform-react-remove-prop-types');
  }

  return bplugins;
}

if (isProduction) {
  plugins.push(new UglifyJSPlugin({
    sourceMap: true,
    uglifyOptions: {
      mangle: false,
      output: {
        comments: false,
        beautify: true
      }
    }
  }));
}

const config = {
  devtool: '#source-map',

  stats: {
    children: false
  },

  watchOptions: {
    ignored: /node_modules/
  },

  entry: {
    preload: 'preload.js',
    vendor: 'vendor.js',
    index: 'index.js'
  },

  resolve: {
    modules: [
      root,
      path.join(root, 'Shims'),
      'node_modules'
    ],
    alias: {
      jquery: 'jquery/src/jquery'
    }
  },

  output: {
    filename: path.join('_output', uiFolder, '[name].js'),
    sourceMapFilename: '[file].map'
  },

  plugins,

  resolveLoader: {
    modules: [
      'node_modules',
      'frontend/gulp/webpack/'
    ]
  },

  module: {
    rules: [
      {
        test: /\.js?$/,
        exclude: /(node_modules|JsLibraries)/,
        loader: 'babel-loader',
        options: {
          plugins: babelPlugins(),
          presets: ['@babel/env', '@babel/react']
        }
      },

      // CSS Modules
      {
        test: /\.css$/,
        exclude: /(node_modules|globals.css)/,
        use: extractCSSPlugin.extract({
          fallback: 'style-loader',
          use: [
            {
              loader: 'css-variables-loader',
              options: {
                cssVarsFiles
              }
            },
            {
              loader: 'css-loader',
              options: {
                modules: true,
                importLoaders: 1,
                localIdentName: '[name]-[local]-[hash:base64:5]',
                sourceMap: true
              }
            },
            {
              loader: 'postcss-loader',
              options: {
                config: {
                  ctx: {
                    cssVarsFiles
                  },
                  path: 'frontend/postcss.config.js'
                }
              }
            }
          ]
        })
      },

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

      // Fonts
      {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              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])?$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              emitFile: false,
              name: 'Content/Fonts/[name].[ext]'
            }
          }
        ]
      }
    ]
  }
};

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

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