const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const merge = require('webpack-merge');

const parts = require('./webpack.parts');

const PATHS = {
  app: path.join(__dirname, 'app'),
  build: path.join(__dirname, 'build')
};

const commonConfig = merge([
  {
    entry: {
      app: PATHS.app
    },
    output: {
      path: PATHS.build,
      filename: '[name].js'
    },
    plugins: [
      new HtmlWebpackPlugin({
        title: 'Webpack demo'
      })
    ]
  },
  parts.lintJavascript({include: PATHS.app}),
  parts.lintCSS({include: PATHS.app})
]);

const productionConfig = merge([
  parts.extractCSS({
    use: ['css-loader', parts.autoprefix()]
  })
]);

const developmentConfig = merge([
  parts.loadCSS(),
  parts.devServer({
    // Customize host/port here if needed
    host: process.env.HOST,
    port: process.env.PORT
  })
]);

module.exports = env => {
  if (env.target === 'production') {
    return merge(commonConfig, productionConfig);
  }

  return merge(commonConfig, developmentConfig);
};

@@ -660,21 +660,114 @@
 e: %5B
-'css-loader',
+%0A      %7B%0A        loader: 'css-loader',%0A        options: %7B%0A          modules: true%0A        %7D%0A      %7D,%0A     
  par
@@ -781,16 +781,21 @@
 prefix()
+%0A    
 %5D%0A  %7D)%0A%5D

use css modules in production build (#3)