Как обслуживать изображения с помощью веб-пакета? - PullRequest
Новая
       8

Как обслуживать изображения с помощью веб-пакета?

0 голосов
/ 24 июня 2018

Я прочитал кучу материала по этому вопросу, но я все еще не могу передать свои файлы так, как хочу.

Моя файловая структура: 

root/
  /dist/            <=  here is where webpack is putting bundles
  /public/          <=  here are where all my images are stored
  /src/             <=  here are my source files
     template.html  <= some files under src
     index.js
webpack.config.js   <=  files under root
index.html          <=  html now at root by webpack

Мой webpack.config имеет htmlWebpackPlugin , настроенный так: 

 new HtmlWebpackPlugin({
     "template": "./src/template.html",
     "filename": "../index.html",        <=  moved up to root?
     "hash": false,
     "inject": true,
     "compile": true,
     "favicon": false,
     "minify": false,
     "cache": true,
     "showErrors": true,
     "chunks": "all",
     "excludeChunks": [],
     "title": "Webpack App",
     "xhtml": true,
     "chunksSortMode": 'none' //fixes bug
     }),

и мой выход настроены так: 

output: {
    filename: '[name].[chunkhash:4].js',
    chunkFilename: '[name].[chunkhash:4].js', //name of non-entry chunk files
    path: path.resolve(__dirname, 'dist'),
    publicPath: "/public"          <=  not really sure about this
},

Таким образом, publicPath, насколько я понимаю, где свойство src для элементов изображения будет отображаться во всем коде, верно? Итак, в моем коде я могу просто поставить src = '/ images ....', потому что перед ним будет стоять "/ public". Верно?

Кроме того, я прочитал кое-что о 'webpack-dev-server', который также будет обслуживать файлы из этой папки (общедоступные). Выглядит ли когда-нибудь сервер dev в директории dist, созданной в веб-пакете? Или это совершенно отдельно?

Итак, как вы можете видеть, я переместил index.html в корень. Не уверен, нужно ли мне это делать, но я пытаюсь понять, как обслуживать мои изображения, которые я вызываю, из самого html.

Как я могу легко обслуживать свои файлы из кода '/ images / ....', а также напрямую из html? Должен ли я обслуживать html из папки public или это повлияет на обслуживание пакетов dist?

Ответы [ 2 ]

0 голосов
/ 25 июня 2018

С помощью devServer проще всего смонтировать вашу директорию assets. Webpack-dev-server использует express за кулисами так: 

const express = require('express');
module.exports = {
    ...
    devServer:{
        host: '0.0.0.0',
        port: 8080,
        before(app) {
            app.use('/assets/uploads', express.static(path.resolve('C:\\temp')));
        }
    }
}

Я имею в виду, что вы все равно будете делать что-то похожее на вашем производственном сервере.

т. location /assets/uploads { root /var/www/project; }; в nginx или как угодно.

Другой способ - использовать CopyWebPackPlugin: 

new CopyWebpackPlugin(
  [
    {
      from: path.resolve(__dirname, 'public'), 
      to: path.resolve(__dirname, 'dist'),
      ignore: [ 'index.html', ... ]
    }
  ]
),

Еще одним способом может быть добавление ваших изображений к коду require('image1.jpg'); где-нибудь в вашей записи, добавление загрузчика файлов, и пусть webpack обрабатывает все остальное. Webpack такой гибкий. Если вас интересует структура папок, временно отключите webpack-dev-server, чтобы вы могли увидеть фактический вывод.

Извините, я только что понял, что ответил на ваш заглавный вопрос и проигнорировал все остальное.

0 голосов
/ 25 июня 2018

Так что publicPath, как я понимаю, это то, где свойство "src" находится на элементы изображения будут обслуживаться по всему коду, правильно? Так, в моем коде я могу просто поставить src = '/ images ....', потому что '/ public' будет предваряется. Правильно?

Нет, publicPath - это место, откуда обслуживаются статические файлы (производственная сборка) на вашем сервере, и для веб-пакета потребуются все другие куски, использующие этот префикс.

Кроме того, я читал что-то о том, что 'webpack-dev-server' будет обслуживать файлы из этой папки (публичной) тоже. Сервер dev когда-либо смотрит в созданный webpack dist directiory? Или это совершенно отдельно?

webpack-dev-server хранит файлы из памяти, все файлы скомпилированы.

Итак, как вы можете видеть, я переместил index.html в корень. Не уверен если Мне нужно было сделать это, но я пытаюсь выяснить, как обслуживать мой изображения, которые я вызываю из самого html.

Не требуется.

Как я могу легко обслуживать мои файлы из кода '/ images / ....' а также обслуживать их напрямую из html? Должен ли я служить HTML из папки «public» или это повлияет на обслуживание расслоения?

Вы импортируете свои изображения как: import MyImage from './cat-image.png.

И помещает src attr в тег img. <img src={MyImage} />

Webpack увидит импорт (необходимо, чтобы файл-загрузчик был установлен и настроен в конфигурационном файле webpack) и проанализирует его. Все эти проанализированные изображения будут выводиться в целевую папку (dist или что-либо еще, что вы настроили на своем выходе).

...