webpack打包后index.styl中background图片无法添加md5后缀

问题描述

问 题

var config = {
  context: __dirname,
  entry: entry,
  output: {
    path: outputPath,
    publicPath: "/",
    filename: "./static/[name].bundle.js",
  },
  resolve: {
    alias: {
      "common": path.join(__dirname, '../common'),
      "static": path.join(__dirname,'../static')
    }
  },
  devtool: "source-map",
  module: {
    loaders:[],
    rules: [{
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ["react","es2015"]
        }
      },{
        test: /\.html$/,
        use: [{
          loader: 'html-loader',
          options: {
            minimize: false,
            removeAttributeQuotes : false
          }
        }]
      },{
        test: /\.(png|jpg|jpeg|gif)$/,
        use: [{
          loader: 'url-loader',
          options: {
            limit: 125,
            name: "static/[hash].[name].[ext]"
          }
        }]
      },{
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
               use: "css-loader"
        })
      },{
        test: /\.styl$/,
        loader: ExtractTextPlugin.extract({
              fallback: "style-loader",
                   use: ["css-loader", "stylus-loader"]
        })
      }]
  },
  plugins: [
    new CopyWebpackPlugin([{
      from: path.join(__dirname, "../common"),
      to: path.join(outputPath, "common")
    },{
      from: path.join(__dirname, "../static"),
      to: path.join(outputPath, "static")
    }]),
    new ExtractTextPlugin("./static/[name].css"),
    new webpack.DllReferencePlugin({
      context: ".",
      manifest: require(path.join(outputPath, "static", "js", "lib.manifest.json")),
    })
  ]
}

如果是react写的index.js下引入图片是可以md5的，但是styl文件就不行

解决方案

new ExtractTextPlugin("./static/[name].css") 
改为
new ExtractTextPlugin("./static/[name].[contenthash].css") 

这篇关于webpack打包后index.styl中background图片无法添加md5后缀的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！