Я построил простое приложение реагирования, которое использует webpack и babel. У меня проблемы с загрузкой моих изображений. Моя основная структура папок:

root: 
  webpack.config.js
  package.json

  public:
    index.html

  src:
    800x600-1x2x.jpg
    App.css
    App.js
    index.js

App.js является стандартным кодом:

import React, { Component} from "react";
import {hot} from "react-hot-loader";
import "./App.css";

class App extends Component{
  render(){
    return(
      <div className="App">
        <h1> Hello, World!! </h1>
      </div>
    );
  }
}

export default hot(module)(App);

В app.css я загружаю изображение на свой фон:

.App {
    margin: 1rem;
    font-family: Arial, Helvetica, sans-serif;
    background-image: url("./800x600-1x2x.jpg");
    border: 1px solid red;
  }

Webpack.config.js: я пытался использовать url-loader вместо file-loader, который не работал

const path = require("path");
const webpack = require("webpack");

module.exports = {
  entry: "./src/index.js",
  mode: "development",
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        loader: "babel-loader",
        options: { presets: ["@babel/env"] }
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: "file-loader"
      }
    ]
  },
  resolve: { extensions: ["*", ".js", ".jsx"] },
  output: {
    path: path.resolve(__dirname, "dist/"),
    publicPath: "/dist/",
    filename: "bundle.js"
  },
  devServer: {
    contentBase: path.join(__dirname, "public/"),
    port: 3000,
    publicPath: "http://localhost:3000/dist/",
    hotOnly: true
  },
  plugins: [new webpack.HotModuleReplacementPlugin()]
};

Просматривая исходники Chrome, я вижу, что webpack: // что-то делает с изображением, если я нажимаю на 800x600-1x2x.jpg, я получаю этот код:

__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "0e5cf6190f4b1586fb587bc9e9577981.jpg");

Выбрав элемент App и глядя на правила CSS, я вижу, что это перечеркнуто:

background-image: url([object Module]);

Вещи, которые я пытался и не работал

Поместив изображение в общую папку, которая ничего не делала.

Создать папку dist и поместить изображение в эту папку.

Установил html-загрузчик и включил его в веб-пакет:

  {
    test: /\.html$/,
    loader: 'html-loader'
  },

Установил resol-url-loader и включил его в веб-пакет:

  {
    test: /\.css$/,
    loader: ["style-loader", "css-loader", "resolve-url-loader"]
  },

Другая информация:

Я также не собираю bundle.js, который веб-пакет компилирует во время выполнения.

Я использую это для запуска моего веб-пакета: webpack-dev-server --mode development

Я просмотрел ответы на другие вопросы, связанные со стековым потоком, и не увидел ничего подходящего для меня. Чего мне не хватает?

1
frogtoprincejs 20 Дек 2019 в 20:43

2 ответа

Лучший ответ

Так что я копался в документации по веб-пакетам и другим онлайн-проектам вчера целый день, только чтобы понять, что мои зависимости устарели ... Однако все усилия, которые я вложил, не были потеряны, я создал гораздо лучший и более чистый набор Это будет работать с приложением реагировать и загружать CSS и изображения. Наслаждаться. -.-

Package.json :

  "devDependencies": {
    "@babel/cli": "^7.1.0",
    "@babel/core": "^7.1.0",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.2",
    "css-loader": "^3.4.0",
    "file-loader": "^5.0.2",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^1.1.1",
    "url-loader": "^3.0.0",
    "webpack": "^4.41.4",
    "webpack-cli": "^3.1.1",
    "webpack-dev-server": "^3.10.1"
  },
  "dependencies": {
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-hot-loader": "^4.3.11"
  }

Структура папок:

public
  800x600-1x2x.jpg
  index.html

src
  App.css
  App.js
  index.js

Webpack.config.js :

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

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
    publicPath: "/"
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        options: { presets: ["@babel/env"] }
      },
      {
        test: /\.css$/,
        loader: ["style-loader", "css-loader"]
      },
      {
        test: /\.(jpg)$/i,
        loader: "url-loader"
      }
    ]
  },
  devServer: {
    hot: true,
    open: true,
    port: 3000,
    proxy: {"/": "http://localhost:5000"},
    contentBase: path.resolve(__dirname, "public"),
    publicPath: "/"
  },
  plugins: [
    new HtmlWebpackPlugin({
        template: path.resolve(__dirname, 'public/index.html'),
        inject: true
    })
  ]
};

Чтобы файл css работал, нужно импортировать его в ваш .js пример my index.js:

import "./App.css"
import App from "./App.js"
ReactDOM.render(<App/>, document.getElementById("root"));

Оттуда мой файл CSS загружает изображение через мой путь к каталогу:

background: url("../public/800x600-1x2x.jpg");

Загрузка изображения в html через тег img выполняется как обычно (предупреждение ниже):

<img src="800x600-1x2x.jpg">

Предупреждение: тег img не загружает изображение при использовании прокси без реального бэкэнда.

Тем не менее, мы используем реагирующие компоненты, поэтому мы можем / должны загрузить изображение внутри наших компонентов jsx.

Сначала импортируйте изображение, а затем используйте тег изображения. Пример:

import background from '../public/800x600-1x2x.jpg'

const App = () => <img src={background}></img>
0
frogtoprincejs 22 Дек 2019 в 21:17

Похоже, что относительные пути неверны. Ваши активы должны быть размещены в вашей исходной папке, а не в корне.

Эта структура должна работать с вашей текущей конфигурацией веб-пакета

root: 
  webpack.config.js
  package.json


  public:
    index.html

  src:
    index.js
    800x600-1x2x.jpg
    App.css
    App.js
0
aoshea 20 Дек 2019 в 18:12