使用 webpack 构建网站时，Slim 文件中的中间人图像资产不起作用

Question

我的图像链接的正确格式是什么，以便它们通过带有正确资产哈希戳的 webpack 编译？现在，这在我的 sass 文件中正常工作，但在 slim-lang html 模板中无法正常工作。

示例HTML：

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

文件夹结构：

我的 Webpack 配置：

"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
    })
  ]
};

我的包Json文件...

{
  "scripts": {
    "start": "NODE_ENV=development webpack --watch -d --progress --color",
    "build": "NODE_ENV=production webpack --bail -p"
  },
  "dependencies": {
    "@fortawesome/fontawesome": "^1.1.3",
    "@fortawesome/fontawesome-free-brands": "^5.0.6",
    "@fortawesome/fontawesome-free-regular": "^5.0.6",
    "@fortawesome/fontawesome-free-solid": "^5.0.6",
    "bootstrap": "^4.0.0",
    "jquery": "^3.3.1",
    "normalize-scss": "^7.0.1"
  },
  "devDependencies": {
    "babel": "^6.23.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "clean-webpack-plugin": "^0.1.18",
    "css-loader": "^0.28.9",
    "extract-loader": "^1.0.2",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.6",
    "node-sass": "^4.7.2",
    "postcss-loader": "^2.1.0",
    "precss": "^3.1.0",
    "resolve-url-loader": "^2.2.1",
    "sass-loader": "^6.0.6",
    "script-loader": "^0.7.2",
    "style-loader": "^0.20.1",
    "url-loader": "^0.6.2",
    "webpack": "^3.11.0",
    "webpack-manifest-plugin": "^1.3.2"
  }
}

Answer 1

万一其他人正在寻找此问题的解决方案，以下是我的解决方法。

首先，我确保 activate :asset_hash 已打开并为我的模板资产配置了 set :images_dir, 'assets/images/middleman'。接下来，我分解了 webpack 和中间人使用的资产，如下所示。这让我可以在我的 slim 模板中使用像这样的代码 link rel='shortcut icon' href=(image_path('favicons/favicon.ico')) 并拥有带有散列的可路由资产来破坏浏览器缓存。

看起来像这样...

使用 webpack 构建网站时，Slim 文件中的中间人图像资产不起作用

Middleman image assets in Slim files not working when using webpack to build website

ruby

image

middleman

webpack