Question

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

我在我的webpack中配置了以下内容：

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

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

我如何才能做到这一点，因为我的JS文件工作得很好

BTW - 这与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

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

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

2 个答案: