extract-text-webpack-plugin - 如何创建散列名称（只有在文件更改时才有唯一名称）

Question

我有以下问题，我正在使用： extract-text-webpack-plugin version 2.0.0-rc。 2在webpack 2中，我注意到，即使我只更改JS文件，css文件的名称也会改变。

我在我的WebPack配置如下：

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

我想用长缓存我的CSS文件，这意味着只有当文件CSS改变哈希应该是不同的。

我怎样才能做到这一点，我的JS文件的工作就好了

顺便说一句 - 这是的WebPack相同的行为1

感谢

Answer 1

检查docs for ExtractTextPlugin，发现filename支持跟随占位符：[name],[id]和[contenthash]（提取文件的内容的散列）。

Answer 2

您可以使用您的webpack.config.js插件下面创建一个内容哈希CSS文件：

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

取样完全的WebPack配置：

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