0

I have the following question, I'm using: extract-text-webpack-plugin version 2.0.0-rc.2 in webpack 2, and I noticed that even that I change only JS files the name of the css file is changed.

I have in my webpack config the following:

new ExtractTextPlugin("[name].[hash].css")

I want to use long cache for my CSS file, meaning that only when the file CSS is changed the hash should be different.

How I can do this, for my JS files is working just fine

BTW - This is the same behaviour in webpack 1

Thanks

Boba Fett likes JS
  • 747
  • 3
  • 10
  • 21

2 Answers2

2

You can create a css file with a content hash by using the following in your webpack.config.js plugins:

plugins: [
    new ExtractTextPlugin('styles-[contenthash].css'),
  ]

Sample full webpack config:

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

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.[chunkhash].js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader'
        })
      }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'}),
    new ExtractTextPlugin('styles.[contenthash].css'),
  ]
};
duhaime
  • 25,611
  • 17
  • 169
  • 224
1

Check the docs for ExtractTextPlugin and find that filename supports the following placeholders: [name], [id] and [contenthash] (hash of the content of the extracted file).

simon04
  • 3,054
  • 29
  • 25