javascript - extract-text-webpack-plugin - 如何创建哈希名称（仅在文件更改时才具有唯一名称）

Question

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

我的 webpack 配置中有以下内容：

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

我想为我的 CSS 文件使用长缓存，这意味着只有当文件 CSS 更改时，哈希才会不同。

我怎么能做到这一点，因为我的 JS 文件工作得很好

顺便说一句 - 这与 webpack 1 中的行为相同

谢谢

Answer 1

您可以通过在 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'),
  ]
};

Answer 2

检查文档ExtractTextPlugin并找到filename支持以下占位符的文档：[name]和[id]（[contenthash]提取文件内容的哈希）。