/**
 * COMMON WEBPACK CONFIGURATION
 */

const path = require('path');
const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = (options) => ({
  entry: options.entry,
  output: Object.assign({ // Compile into js/build.js
    path: path.resolve(process.cwd(), 'build'),
    publicPath: '/',
  }, options.output), // Merge with env dependent settings
  module: {
    rules: [
      {
        test: /\.js$/, // Transform all .js files required somewhere with Babel
        use: 'babel-loader',
        exclude: /node_modules/,
        query: options.babelQuery,
      },

      {
        // Do not transform vendor's CSS with CSS-modules
        // The point is that they remain in global scope.
        // Since we require these CSS files in our JS or CSS files,
        // they will be a part of our compilation either way.
        // So, no need for ExtractTextPlugin here.
        test: /\.css$/,
        include: /node_modules/,
        use: ['style-loader', 'css-loader'],
      },

      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract({
          loader: ['css-loader?sourceMap', 'sass-loader?sourceMap'],
          // loader: ['css-loader?sourceMap', 'postcss-loader', 'sass-loader']
        }),
        // use: ['style-loader', 'css-loader?sourceMap', 'postcss-loader', 'sass-loader']
      },

      {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        use: 'file-loader',
      },

      {
        test: /\.(jpg|png|gif)$/,
        use: [
          'file-loader',
          'image-webpack?{progressive:true, optimizationLevel: 7, interlaced: false, pngquant:{quality: "65-90", speed: 4}}',
        ],
      },

      {
        test: /\.html$/,
        use: 'html-loader',
      },

      {
        test: /\.json$/,
        use: 'json-loader',
      },

      {
        test: /\.(mp4|webm)$/,
        use: 'url-loader?limit=10000',
      }
    ],
  },
  plugins: options.plugins.concat([
    new webpack.ProvidePlugin({
      // make fetch available
      fetch: 'exports?self.fetch!whatwg-fetch',
    }),

    // Always expose NODE_ENV to webpack, in order to use `process.env.NODE_ENV`
    // inside your code for any environment checks; UglifyJS will automatically
    // drop any unreachable code.
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV),
      },
    }),

    new ExtractTextPlugin({
      filename: 'bundle.css',
      disable: false,
      allChunks: true,
    }),

    /*
     * Plugin: CopyWebpackPlugin
     * Description: Copy files and directories in webpack.
     *
     * Copies project static assets.
     *
     * See: https://www.npmjs.com/package/copy-webpack-plugin
     */
    new CopyWebpackPlugin([
      { from: 'src/assets', to: 'assets' },
    ]),

    new webpack.NamedModulesPlugin(),
  ]),
  resolve: {
    modules: ['src', 'node_modules'],
    extensions: [
      '.js',
      '.jsx',
      '.react.js',
      '.scss',
      '.css',
    ],
    mainFields: [
      'browser',
      'jsnext:main',
      'main',
    ],
  },
  devtool: options.devtool,
  target: 'web', // Make web variables accessible to webpack, e.g. window
});
