Question

我的图片链接的正确格式是什么，所以它们是通过webpack使用正确的资产哈希标记编译的？现在，这在我的sass文件中正常工作，但不是瘦的html模板。

示例HTML：

sdc

文件夹结构：

我的Webpack配置：

p
  = image_tag 'favicons/testme.png'
  = tag :img, src: '/images/favicons/testme.png'

我的包Json文件......

"use strict";

const path = require("path");
const webpack = require("webpack");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const ManifestPlugin = require("webpack-manifest-plugin");
const outputPath = path.join(__dirname, "build/assets");

module.exports = {
  entry: {
    site: [
      path.join(__dirname, "/source/assets/stylesheets/site.scss"),
      path.join(__dirname, "/source/assets/javascripts/site.js")
    ]
  },

  output: {
    path: outputPath,
    filename: '[name]-[hash].js',
    publicPath: '/assets/'
  },

  resolve: {
    modules: [
      'node_modules'
    ]
  },

  module: {
    rules: [
      {
        test: /\.(woff|woff2|eot|ttf|svg|ico|jpg|jpeg|png)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 5000,
              name: "[name]-[hash].[ext]",
              publicPath: '/assets/'
            }
          }
        ]
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['es2015']
            }
          }
        ]
      },
      {
        test: /\.(css|scss)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name]-[hash].css',
              publicPath: '/assets/'
            }
          },
          {
            loader: 'extract-loader'
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'resolve-url-loader'
          },
          {
            loader: 'sass-loader',
            options: {
              includePaths: [
                path.resolve(__dirname, 'node_modules/bootstrap/scss'),
              ],
              sourceMap: true
            }
          }
        ]
      }
    ]
  },

  plugins: [
    new ManifestPlugin({
      fileName: 'rev-manifest.json'
    }),
    new CleanWebpackPlugin([outputPath], {
      root: __dirname
    })
  ]
};

Answer 1

如果其他人正在为这个问题寻找解决方案，这就是我解决它的方法。

首先，我确保已启用activate :asset_hash并为我的模板资产配置了set :images_dir, 'assets/images/middleman'。接下来，我分解了webpack和middleman使用的资产，如下所示。这允许我在我的瘦模板中使用像link rel='shortcut icon' href=(image_path('favicons/favicon.ico'))这样的代码，并使用哈希来管理浏览器缓存的可路由资产。

这看起来像这样......

Slim文件中的Middleman图像资源在使用webpack构建网站时无法正常工作

1 个答案: