Webpack构建网站时Slim文件中Middleman图片资源失效及链接格式问询

I’ve run into this exact issue before when combining Middleman’s Slim templates with Webpack asset handling. The core problem is that Webpack can’t automatically parse Middleman’s built-in image helpers (like image_tag) because they output paths that don’t trigger Webpack’s asset processing pipeline. Here’s how to fix it step by step:

1. Install Webpack Loaders for Slim & HTML Processing #

First, you need to add loaders that let Webpack understand Slim templates and parse image references in the resulting HTML. Install these dev dependencies:

npm install --save-dev slim-loader html-loader html-webpack-plugin

• slim-loader: Compiles Slim templates to plain HTML.
• html-loader: Scans HTML for asset references (like img src) and converts them into Webpack require() calls.
• html-webpack-plugin: Generates final HTML files from your Slim templates after processing.

2. Update Your Webpack Configuration #

Modify your webpack.config.js to process Slim files and image assets correctly. Here’s a simplified example:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js', // Your main JS entry point
  output: {
    filename: 'js/[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
    clean: true // Cleans the dist folder before each build
  },
  module: {
    rules: [
      // Process Slim templates: convert to HTML, then parse assets
      {
        test: /\.slim$/,
        use: [
          {
            loader: 'html-loader',
            options: {
              sources: true // Critical: enables processing of img src, link href, etc.
            }
          },
          'slim-loader'
        ]
      },
      // Process images and add content hashes to filenames
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        type: 'asset/resource', // Webpack 5's built-in replacement for file-loader
        generator: {
          filename: 'images/[name].[contenthash][ext]' // Output path with hash
        }
      },
      // Don't forget your Sass loader config (since that's already working!)
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  },
  plugins: [
    // Generate HTML from your Slim template
    new HtmlWebpackPlugin({
      template: './src/templates/index.slim', // Path to your Slim file
      filename: 'index.html' // Output HTML filename
    })
  ],
  resolve: {
    // Optional: Simplify image paths by adding your assets folder to Webpack's resolver
    modules: [path.resolve(__dirname, 'src/assets'), 'node_modules']
  }
};

3. Fix Image References in Slim Templates #

Replace Middleman’s image_tag helper with standard HTML <img> tags using paths Webpack can resolve.

Option A: Relative Paths (Relative to the Slim File) #

If your Slim template is in src/templates/ and images are in src/assets/images/, use:

img src="../assets/images/logo.png" alt="Company Logo"

Option B: Shortened Paths (Using Webpack Resolve) #

If you added src/assets to resolve.modules in Webpack config, you can use shorter paths:

img src="images/logo.png" alt="Company Logo"

Key Rule: Never use Middleman’s asset helpers here! Webpack needs to see the actual file path to process it, hash the filename, and copy it to your output directory.

4. Integrate with Middleman (If Still Using It) #

If you’re keeping Middleman in your workflow, update config.rb to point to Webpack’s output directory:

set :build_dir, 'dist' # Match Webpack's output path
set :images_dir, 'images' # Matches Webpack's image output folder

This ensures Middleman references the hashed images Webpack generates.

Test the Build #

Run webpack --mode production and check your dist folder. The generated HTML should have image src attributes pointing to files like images/logo.abc123.png (with a unique hash), and the images will be present in that directory.

This approach aligns your Slim template assets with Webpack’s processing pipeline, matching the behavior you already have working for Sass files.

内容的提问来源于stack exchange，提问作者Chris Hough