wepack.config.babel.js

wepack.config.babel.js

const {resolve} = require('path')
const webpack = require('webpack') // Requiring the webpack lib
const ProgressBarPlugin = require('progress-bar-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const InlineManifestWebpackPlugin = require('inline-manifest-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const OfflinePlugin = require('offline-plugin')

const context = resolve('src')

module.exports = env => {
  const config = ({
  context,
  devtool: (env.prod ? 'source-map': 'eval'),
    entry:  {
      app: './index.jsx',
      vendor:['react', 'todomvc-app-css/index.css']
    },
  resolve: {
    extensions: ['*', '.js', '.jsx', '.json'],
    alias: {
      config: resolve('config', 'development')
    }
  },
  output: {
    filename: `bundle.[name].${env.prod? '[chunkhash]':'[hash]'}.js`,
    path: resolve('dist')
  },
  devServer: {
    contentBase: './dist',
    hot: true // Activate hot loading
  },
  plugins: [
    new ProgressBarPlugin(),
    new ExtractTextPlugin(`styles.[name].${env.prod? '[chunkhash]':'[hash]'}.css`),
    (env.prod && new InlineManifestWebpackPlugin()),
     new HtmlWebpackPlugin({
     template:'./index.html'
    }),
    (env.prod && new webpack.optimize.CommonsChunkPlugin({
      names:['vendor', 'manifest'] // remove the vendor code from app
    })),
    new webpack.HotModuleReplacementPlugin(), // Wire in the hot loading plugin
    new OfflinePlugin()
  ].filter( plugin => plugin !== undefined ),

  stats: {
    colors: true,
    reasons: true,
    chunks: true
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'eslint-loader?{fix: true}',
        include: context,
        enforce: 'pre'
      },
      {
      test: /\.jsx?$/,
      include: context,
      loader: 'babel-loader'
    }, {
      test: /\.json$/,
      loader: 'json-loader'
    },
    {
      test: /\.css$/,
      loader: ExtractTextPlugin.extract({
        fallbackLoader: 'style-loader', // style-loader insert the style in the page
        loader: 'css-loader',  // css-loader resolve all the imports and url in the css
      })
    }
   ]
  }
})

  if(env.debug) {
    console.log(config)
    debugger //eslint-disable-line
  }
  return config
}