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文件就不行

阅读 2.2k
2 个回答
new ExtractTextPlugin("./static/[name].css") 
改为
new ExtractTextPlugin("./static/[name].[contenthash].css") 

已经解决了 写background:url()图片的时候,得在图片链接前加上"~",不然webpack打包路径当做了绝对录几个 ,另外一种使用"resolve-url-loader"插件解析css,

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题