extract-text-webpack-plugin example

extract-text-webpack-plugin_example.js

const _ = require('lodash')
const path = require('path')
const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const pkg = require('./package.json')

// Webpack: The Confusing Parts
// https://medium.com/@rajaraodv/webpack-the-confusing-parts-58712f8fcad9

const isDevelopment = process.env.NODE_ENV === 'development'

const plugins = [
  new webpack.optimize.OccurenceOrderPlugin(),
  new webpack.optimize.DedupePlugin(),
  new webpack.NoErrorsPlugin(),
  new webpack.DefinePlugin({
    'process.env': {
      NODE_ENV: JSON.stringify(process.env.NODE_ENV)
    }
  }),
  new ExtractTextPlugin(`${pkg.name}.css`)
]

if (!isDevelopment) {
  plugins.push(new webpack.optimize.UglifyJsPlugin())
}

const entry = {}
entry[pkg.name] = './src/index'
entry[pkg.name] = './assets/styles/index.scss'

// this default is production
const production = {
  devtool: 'source-map',
  entry,
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js',
    publicPath: '/'
  },
  resolve: {
    extensions: ['', '.js']
  },
  module: {
    loaders: [
      {
        test: /\.js?$/,
        loaders: ['babel'],
        include: path.join(__dirname, 'src')
      },
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract('style', 'css!sass'),
        include: [
          path.resolve(__dirname, 'assets/styles')
        ]
      },
      {
        test: /\.png$/,
        loader: 'url-loader?limit=1'
      }
    ]
  },
  postcss: function () {
    const autoPrefixerOptions = {
      browsers: ['last 2 versions']
    }

    return [
      require('autoprefixer')(autoPrefixerOptions)
    ]
  },
  plugins
}

let config = _.cloneDeep(production)

if (isDevelopment) {
  _.assign(config, {
    devtool: 'eval',
    entry: [
      'react-hot-loader/patch',
      './src/index'
    ],
    devServer: {
      host: '0.0.0.0'
    }
  })

  _.set(config, 'output.filename', `${pkg.name}.js`)
}

module.exports = config