WedX - журнал о программировании и компьютерных науках

общедоступная папка webpack для изображений

Чтобы начать использовать React, я добавил Webpack и Babel в свое приложение node. Я импортировал все свои скрипты в один скрипт и установил его как запись в webpack.config.js, которая выглядит так:

module.exports = {

entry: './src/App.js',
output: {
    path: __dirname,
    filename: 'app.js'
},
module: {
    loaders: [{
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
            presets: ['es2015', 'react']
        }
    }]
}

};

при запуске webpack-dev-server сценарии не могут найти изображения, расположенные в моей общей папке (которая указана как статическая папка на сервере index.js). Я попытался добавить - publicPath: "/ public /" в вывод, но потом он даже не смог найти app.js. как лучше всего использовать мои изображения в Webpack?


Ответы:


1

Просто поместите их в исходный каталог и потребуйте их!

src / exampleImage.jpg = ваше изображение

src / ExampleImage.js:

import React from 'react';
import imageUrl from './exampleImage.jpg';

export default class ExampleImage extends React.Component {
  render() {
    return <img src={imageUrl} />;
  }
}

Добавьте правильный загрузчик в свой массив загрузчиков (не забудьте npm install file-loader):

  {
    test: /\.(jpg|png|gif)$/,
    loaders: ['file'],
  }

И вы сделали! Webpack автоматически скопирует изображение в правильный каталог (где будут находиться ваши встроенные скрипты) и убедится, что imageUrl верен и работает.

Классный бонус: вы можете автоматически минимизировать изображения с помощью image-webpack-loader и делать такие вещи, как автоматическое хеширование имен файлов с помощью file-loader для долгосрочного кэширования. Просто проверьте их документацию для получения дополнительной информации!

05.12.2016
Новые материалы

Как создать диаграмму градиентной кисти с помощью D3.js
Резюме: Из этого туториала Вы узнаете, как добавить градиентную кисть к диаграмме с областями в D3.js. Мы добавим градиент к значениям SVG и применим градиент в качестве заливки к диаграмме с..

Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…
Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..

Лицензии с открытым исходным кодом: руководство для разработчиков и создателей
В динамичном мире разработки программного обеспечения открытый исходный код стал мощной парадигмой, способствующей сотрудничеству, инновациям и прогрессу, движимому сообществом. В основе..

Объяснение документов 02: BERT
BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..

Как проанализировать работу вашего классификатора?
Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..

Работа с цепями Маркова, часть 4 (Машинное обучение)
Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..


Для любых предложений по сайту: [email protected]