react-snap 指向 js 和 css 中图像的 localost:4567

Question

我做了一个简单的React项目，其中包含一个css文件和一个使用img标签来显示图像的react组件。 CSS 只是在 body 中使用背景图像。

• package.json：

{
  "name": "base-react-typescript",
  "version": "1.0.0",
  "description": "base-react-typescript",
  "main": "src/index.js",
  "scripts": {
    "test": "jest",
    "dev": "webpack serve --open --mode=development",
    "build": "webpack --mode=production",
    "postbuild": "react-snap"
  },
  "reactSnap": {
    "source": "dist"
  },
  "dependencies": {
    "@testing-library/react": "^14.0.0",
    "@types/react": "^18.2.21",
    "@types/react-dom": "^18.2.7",
    "html-webpack-plugin": "^5.5.3",
    "next": "^13.4.19",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "ts-loader": "^9.4.4"
  },
  "devDependencies": {
    "@babel/core": "^7.22.19",
    "@babel/preset-env": "^7.22.15",
    "@babel/preset-react": "^7.22.15",
    "@babel/preset-typescript": "^7.22.15",
    "@jest/globals": "^29.7.0",
    "@testing-library/jest-dom": "^6.1.3",
    "@types/jest": "^29.5.5",
    "@typescript-eslint/eslint-plugin": "^6.7.0",
    "babel-jest": "^29.7.0",
    "babel-loader": "^9.1.3",
    "copy-webpack-plugin": "^11.0.0",
    "css-loader": "^6.8.1",
    "eslint": "^8.49.0",
    "eslint-config-standard-with-typescript": "^39.0.0",
    "eslint-plugin-import": "^2.28.1",
    "eslint-plugin-n": "^16.1.0",
    "eslint-plugin-promise": "^6.1.1",
    "eslint-plugin-react": "^7.33.2",
    "eslint-webpack-plugin": "^4.0.1",
    "html-loader": "^4.2.0",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "react-snap": "^1.23.0",
    "react-test-renderer": "^18.2.0",
    "resolve-url-loader": "^5.0.0",
    "sass": "^1.66.1",
    "sass-loader": "^13.3.2",
    "style-loader": "^3.3.3",
    "ts-jest": "^29.1.1",
    "typescript": "^5.2.2",
    "webpack": "^5.88.2",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  }
}

• webpack.config.js：

/* eslint-disable @typescript-eslint/no-var-requires */
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: path.join(__dirname, 'src', 'index.js'),
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  },
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'dist')

  },
  devServer: {
    static: './dist'
  },
  module: {
    rules: [{
      test: /(\.s[ac]ss|css)$/i,
      use: [
        { loader: 'style-loader' },
        {
          loader: 'css-loader'
        },
        {
          loader: 'resolve-url-loader'
        },
        {
          loader: 'sass-loader',
          options: {
            sourceMap: true
          }
        }
      ]
    },
    {
      test: /\.?js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env',
            '@babel/preset-react',
            '@babel/preset-typescript']
        }
      }
    },
    {
      test: /\.(ts)x?/i,
      exclude: /node_modules/,
      use: {
        loader: 'ts-loader'
      }
    },
    {
      test: /\.(jpe?g|png|webp|pdf|gif|svg)$/i,
      type: 'asset/resource'
    },
    {
      test: /\.?html$/i,
      exclude: /node_modules/,
      loader: 'html-loader'
    }]
  },

  plugins: [
    new HtmlWebpackPlugin({
      hash: true,
      title: 'base-react-typescript',
      filename: './index.html',
      template: 'static/index.html'
    })
  ]
}

一切似乎都工作正常，但在后处理步骤中它生成了一个无法发布到生产中的 html，因为它基于 localhost:4567 生成资源 url

例如，这是使用图像的react组件的基本代码：

import * as React from 'react'

import image from '../../css/img.png'
import '../../css/Base.css'

function Base (): React.JSX.Element {
  return <div>
      <img src={image} />
      Hello from BASE!
    </div>
}

export default Base

然后静态HTML中的图像生成为：

<img src="http://localhost:45678/fd12d494b254065b7749.png">

与 CSS 相同：

body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #fff;
    background-image: url(./img.png);
}

生成：

background-image:url(http://localhost:45678/fd12d494b254065b7749.png)}

我是不是忘记了什么？ 这是第一次尝试应用react-snap。

Answer 1

首先，为什么你安装了 next.js 作为依赖项而不使用它？但对于你的问题，请在你的 webpack 配置中尝试这个：

plugins: [
  new HtmlWebpackPlugin({
    hash: true,
    title: 'base-react-typescript',
    filename: './index.html',
    template: 'static/index.html',
    inject: 'body' // Ensure that script tags are injected into the body
  })
]

将其添加到 webpack 的末尾（替换它）。