title: How to version CSS file in Webpack and update manifest?
body: <p>I have a webpack config that has multiple JS entry points. In one of those entry points, I am requiring my styles: <code>require('../sass/app.scss');</code> and then using a loader to extract the styles into another file <code>app.css</code>.</p>
  
  <pre><code>test: /\.scss$/,
      loader: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader!postcss-loader!sass-loader',
      })
  </code></pre>
  
  <p>And that is working great. Of course, we are having issues with old styles being served when we deploy because they are not being versioned like our JS. I have been searching around for a few hours on how to do this and I cannot find a source on how to not only version the CSS, but also get a manifest file for the CSS. I tried creating a new instance of the versioning plugin that I am using, but it only created a manifest for the JS files. I am assuming that since I only have an <code>output</code> for JS that is the reason for this. Anyhow, here is my <code>webpack.config.js</code>:</p>
  
  <pre><code>const webpack = require('webpack');
  const autoprefixer = require('autoprefixer');
  const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
  const CommonsPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
  const ExtractTextPlugin = require('extract-text-webpack-plugin');
  const path = require('path');
  const VersioningPlugin = require('versioning-webpack-plugin');
  const WebpackMd5Hash = require('webpack-md5-hash');
  const routes = require('./resources/assets/js/routes');
  
  module.exports = {
      entry: routes,
      devtool: 'eval-source-map',
      output: {
          path: path.join(__dirname, 'public/js'),
          filename: '[name].[chunkhash:6].js'
      },
      module: {
          loaders: [
              {
                  test: /\.js$/,
                  loader: 'babel-loader?presets[]=env',
                  exclude: path.resolve(__dirname, 'node_modules/')
              },
              {
                  test: /\.scss$/,
                  loader: ExtractTextPlugin.extract({
                      fallback: 'style-loader',
                      use: 'css-loader!postcss-loader!sass-loader',
                  })
              }
  
          ],
      },
      plugins: [
  
          new CommonsPlugin({
              minChunks: 3,
              name: 'common'
          }),
  
          new BrowserSyncPlugin({
              host: 'localhost',
              port: 3000,
              proxy: 'napaautocarepro.dev',
              files: [
                  'public/css/app.css',
                  {
                      match: ['public/js/*.js', 'app/**/**/*.php', 'resources/views/**/**/*.php'],
                      fn: function(event, file) {
                          this.reload();
                      }
                  }
              ]
          }, {
              injectChanges: true,
              reload: false
          }),
  
          new ExtractTextPlugin('../css/app.css'),
  
          new VersioningPlugin({
              cleanup: true,
              basePath: 'js/',
              manifestPath: path.join(__dirname, 'public/manifest.json')
          }),
  
          new WebpackMd5Hash()
      ]
  };
  </code></pre>
  
  <p>And here is my <code>weback.prod.config.js</code>:</p>
  
  <pre><code>const config = require('./webpack.config');
  const path = require('path');
  const webpack = require('webpack');
  const CleanWebpackPlugin = require('clean-webpack-plugin');
  const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
  
  
  config.plugins.unshift(
      new CleanWebpackPlugin(['js', 'css'], {
          root: path.join(__dirname, 'public'),
          verbose: true,
          dry: false,
      }),
  
      new webpack.optimize.UglifyJsPlugin({
          compress: {
              warnings: false
          },
          comments: false,
          sourceMap: true
      }),
  
      new OptimizeCssAssetsPlugin({
          assetNameRegExp: /\.css$/g,
          cssProcessor: require('cssnano'),
          canPrint: true,
          cssProcessorOptions: { discardComments: { removeAll: true } }
      })
  
  );
  
  module.exports = config;
  </code></pre>
  
  <p><strong>How in the world can I version my CSS file and get it into a manifest so I can autoload the correct version?</strong></p>