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