const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const projectConfig = require('./config.js');

const isProd = process.env.NODE_ENV === 'production';

const cssLoaderConfig = {
  modules: true,
  importLoaders: 1,
  localIdentName: '[name]__[local]___[hash:base64:5]',
};

const prodCssConfig = ExtractTextPlugin.extract({
  fallbackLoader: 'style-loader',
  loader: [
    {
      loader: 'css-loader',
      query: cssLoaderConfig,
    },
    { loader: 'postcss-loader' },
  ],
  publicPath: '/',
});

const devCssConfig = [
  { loader: 'style-loader' },
  {
    loader: 'css-loader',
    options: Object.assign(
      {},
      { sourceMap: true },
      // This doesn't go through Babel so no ES2017 stuff
      cssLoaderConfig  // eslint-disable-line comma-dangle
    ),
  },
  { loader: 'postcss-loader' },
];

const wpconfig = {
  entry: {
    main: [
      './src/index.js',
    ],
    vendor: [
      'react',
      'react-dom',
    ],
  },
  output: {
    path: `${__dirname}/dist`,
    // See:
    // https://github.com/webpack/css-loader/issues/232
    // https://github.com/webpack/css-loader/issues/216
    // https://github.com/webpack/style-loader/issues/55
    publicPath: 'http://localhost:8080/',
    filename: '[hash].[name].js',
  },
  devtool: isProd ? false : 'source-map',
  module: {
    rules: [
      {
        test: /\.woff(2)?(\?[a-z0-9=]+)?$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 64000,
            },
          },
        ],
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?[a-z0-9=]+)?$/,
        use: 'file-loader',
      },
      {
        test: /\.js$/,
        include: path.join(__dirname, 'src'),
        use: 'babel-loader',
      },
      {
        test: /\.css$/,
        use: isProd ? prodCssConfig : devCssConfig,
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.json', '.css'],
  },
  plugins: [
    new webpack.NoErrorsPlugin(),
    new webpack.NamedModulesPlugin(),
    new webpack.optimize.CommonsChunkPlugin({
      names: [
        'vendor',
        'manifest',
      ],
      minChunks: Infinity,
    }),
    new HtmlWebpackPlugin({
      title: projectConfig.ProjectName,
      template: './src/index.html',
    }),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
    }),
    new webpack.LoaderOptionsPlugin({
      debug: !isProd,
    }),
  ],
  devServer: {
    hot: true,
    publicPath: '/',
    historyApiFallback: true,
  },
};

if (!isProd) {
  wpconfig.plugins = [
    new webpack.HotModuleReplacementPlugin(),
    ...wpconfig.plugins,
  ];
} else {
  wpconfig.plugins = [
    new ExtractTextPlugin({
      filename: '[hash].[name].css',
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true,
    }),
    new webpack.optimize.UglifyJsPlugin(),
    ...wpconfig.plugins,
  ];
}

console.log(JSON.stringify(wpconfig, null, 2));

module.exports = wpconfig;

@@ -1923,19 +1923,22 @@
         
-use
+loader
 : isProd
@@ -3045,57 +3045,8 @@
 %0A%7D%0A%0A
-console.log(JSON.stringify(wpconfig, null, 2));%0A%0A
 modu

Fix CSS build