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

【问题标题】：extract-text-webpack-plugin - How to create hash name (unique name only if file change)extract-text-webpack-plugin - 如何创建哈希名称（仅在文件更改时唯一名称）
【发布时间】：2017-02-04 15:41:00
【问题描述】：

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

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

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

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

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

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

谢谢

【问题讨论】：

标签： javascript css webpack extract-text-plugin

【解决方案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'),
  ]
};

【讨论】：

【解决方案2】：

查看docs for ExtractTextPlugin，发现filename支持以下占位符：[name]、[id]和[contenthash]（提取文件内容的哈希）。

【讨论】：