Minify and add hash to css files webpack

Question

I am using webpack for my Angular 2 project. Inside the src folder I have a global css folder and component and other folders.

My webpack.config.js is outside the src folder.

I am using CopyWebpackPlugin to copy the css folder to the dist folder :

new CopyWebpackPlugin([
      { from: 'src/css', to: 'css'}
  ]),

I am using the following loader also for css :

exports.css = {
  test: /\.css$/,
  loader: 'to-string!css?-minimize!postcss',

};

But the deal is that I want to add a hash to each css file name and also then change the css file name in the index.html since these are global files included in the index.html. What is the best way to achieve this?

EDIT : While changing the code i realised that the loader property only applies to the css inside the components folder and not to the outside folder. why is this?

Answer 1

Use https://github.com/webpack/extract-text-webpack-plugin.

example in webpack.config.js

config.plugins.push(
    new ExtractTextPlugin({filename: 'css/[name].[hash].css'})
);
...
config.module = {
   rules: [
       {
          test: /\.css$/,
          exclude: root('src', 'app'),
          loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: ['css', 'postcss']})
       }
   ]
}