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?

Michał Ignaszewski · Accepted Answer · 2016-12-21 13:14:02Z

3

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']})
       }
   ]
}

answered Dec 21, 2016 at 13:14

Michał Ignaszewski

1,13412 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Filip Dupanović · Accepted Answer · 2016-12-21 13:22:13Z

0

Do not use CopyWebpackPlugin for application sources. This will bypass Webpack's loaders and lock you out of all of Webpack's features.

Simply use ES6 imports, require, require.ensure or System.import to require your stylesheets. Alterantively, as Michał suggested, use ExtractTextPlugin in production when applicable.

answered Dec 21, 2016 at 13:22

Filip Dupanović

33.8k14 gold badges89 silver badges119 bronze badges

Collectives™ on Stack Overflow

Minify and add hash to css files webpack

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related