webpack config

webpack.config.js

const webpack = require('webpack')
const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const config = require('./config')

const vendor = [
  'react',
  'react-dom',
  'react-router',
  'redux',
  'react-redux',
  'aphrodite',
  'redial',
  'react-helmet',
  'babel-polyfill',
]

const commomWebpackConfig = {
  context: path.resolve(__dirname, '..'),
  entry: {
    main: [
      path.resolve("src/client.js"),
    ],
    vendor: vendor,
  },

  output: {
    path: path.resolve("build"),
    publicPath: '/',
  },

  resolve: {
    modulesDirectories: ['src', 'node_modules'],
    extensions: ['', '.json', '.js'],
  },

  plugins: [
    new webpack.optimize.OccurrenceOrderPlugin(true),
    new webpack.optimize.CommonsChunkPlugin({
      names: 'vendor',
      minChunks: Infinity,
    }),
    new HTMLWebpackPlugin({
      template: config.index,
      minify: { collapseWhitespace: true },
    }),
  ],

  module: {
    loaders: [
      { test: /\.jsx?$/, exclude: '/node_modules/', include: path.resolve("src"), loader: 'babel?cacheDirectory' },
      { test: /\.(eot|ttf|woff|svg)$/, loader: 'url?limit=50000' }, //50kb
    ],
  },

  postcss: function() {
    return [
      require("postcss-import")({ addDependencyTo: webpack }),
      require("postcss-cssnext")(),
      require("postcss-nested")(),
    ]
  }
}

module.exports = commomWebpackConfig

webpack.dev.config.js

const webpack = require("webpack")
const config  = require("./webpack.config.js")

devConfig = {
  devtool: "inline-source-map",

  entry: Object.assign(config.entry, {
    main: [
      'webpack-hot-middleware/client',
      ...config.entry.main,
    ]
  }),

  output: Object.assign({
    filename: '[name].js',
    chunkFilename: '[name].chunk.js',
  }, config.output),

  resolve: config.resolve,

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('development'),
    }),
    ...config.plugins,
  ],

  module: {
    loaders: [
      { test: /\.css$/, loader: "style!css!postcss" },
      { test: /\.mcss$/, loader: "style!css?module&localIdentName=[name]__[local]___[hash:base64:5]!postcss" },
      ...config.module.loaders,
    ]
  },

  babelQuery: {
    presets: ['react-hmre'],
  },
}

module.exports = devConfig

webpack.prod.config.js

const webpack = require("webpack")
const config  = require("./webpack.config.js")
const ExtractTextPlugin = require("extract-text-webpack-plugin");

const prodConfig = {
  devtool: "source-map",

  entry: config.entry,

  resolve: config.resolve,

  output: Object.assign({
    filename: '[name]_[hash].js',
    chunkFilename: '[id].chunk_[hash].js',
  }, config.output),

  plugins: [
    new webpack.optimize.DedupePlugin(),
    new ExtractTextPlugin("styles.css"),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production'),
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        unused: true,
        dead_code: true,
        warnings: false,
        screw_ie8: true,
      },
    }),
    ...config.plugins,
  ],

  module: {
    loaders: [
      { test: /\.css$/, loader: ExtractTextPlugin.extract("style", "css?sourceMap!postcss") },
      { test: /\.mcss$/, loader: ExtractTextPlugin.extract("style", "css?module&localIdentName=[name]__[local]___[hash:base64:5]&sourceMap!postcss") },
      ...config.module.loaders,
    ]
  },

  postcss: config.postcss,
}

module.exports = prodConfig

i am split config file on three files, in first file hidden working with paths