@webpack_ru
Webpack — русскоговорящее сообщество

Обсуждения webpack, лоадеров, плагинов и сборок Правила: http://bit.ly/our_etiquette См. также: @rollup_ru, @react_js, @vscode_ru, @macos_ru, @js_ru

974 members

Архив канала @webpack_ru 26 сентября 2017 г.

01:40:41 ПП
User 50263515
Ребят, в вебпаке 2 в проекте на angularjs нужно изображения импортировать с помощью import или require, иначе в img src будет пустота? Я не понимаю это волшебство. Как вебпак это делает? Это называется resolving, верно?
01:41:14 ПП
User 50263515
Я это сделал и у меня только тогда картинки появились
02:04:30 ПП
User 7481297
User 50263515
Ребят, в вебпаке 2 в проекте на angularjs нужно изображения импортировать с помощью import или require, иначе в img src будет пустота? Я не понимаю это волшебство. Как вебпак это делает? Это называется resolving, верно?
настраиваешь в вебпаке лоадер для определённых файлов, например:

module: {
  rules: [
    {
      test: /\.(jpg|png)$/,
      include: /src\/assets/,
      loader: 'file-loader',
      options: {
        name: '[path][name].[hash:5].[ext]'
      }
    }
  ]
}

кроме того, у тебя в конфиге:

context: './src',
output: {
  path: './dist',
  publicPath: '/'
}

вебпак находит, где ты делаешь import или require нужному файлу (тестирует по регулярке в rules.test`), и обрабатывает файл нужным лоадером, в данном случае `file-loader. этот лоадер принимает конфиг (`options.name`), исходя из которого кладёт этот файл в нужную папку с нужным названием.

с таким конфигом, если ты сделаешь

import image from '../../assets/images/my-image.jpg'

вебпак положит его в папку

./dist/assets/images/my-image.f0ab2.jpg

а переменная image (где ты импортируешь этот файл) будет равна

/assets/images/my-image.f0ab2.jpg
02:07:52 ПП
User 7481297
можешь использовать url-loader, тогда вебпак прочитает файл и сделает из него data URI:

url(data:image/gif;base64,R0lGODlhEAAQAMQAA...)
02:08:06 ПП
User 7481297
и, соответственно, не будет складывать никуда этот файл
02:09:03 ПП
User 7481297
и магии никакой нет, просто вебпак положил файл с нужным названием в нужную папку, а в бандл передал его путь, исходя из output.publicPath и имени этого файла
02:09:06 ПП
User 50263515
У меня context = __dirname
02:09:35 ПП
User 7481297
а дальше у тебя уже сервер должен отвечать за то, чтобы отдать нужный файл по запросу на /assets/images/...
02:13:53 ПП
User 50263515
А webpack dev server зеркалирует папку с бандлом в память я так понимаю
02:22:21 ПП
03:06:53 ПП
User 211922914
всем хай. 
1) с помощью uglify js можно как-нидь почистить console.warn() ?
2) uglify специально не трет комменты с лицезниями ?
03:07:56 ПП
User 194147497
User 211922914
всем хай. 
1) с помощью uglify js можно как-нидь почистить console.warn() ?
2) uglify специально не трет комменты с лицезниями ?
2 - да, специально. Даже в онлайн версии видно
03:52:12 ПП
User 122550876
User 211922914
всем хай. 
1) с помощью uglify js можно как-нидь почистить console.warn() ?
2) uglify специально не трет комменты с лицезниями ?
2) Нельзя тереть комменты с лицензиями
03:52:25 ПП
User 122550876
Это, собственно, написано в лицензиях
04:04:26 ПП
User 50263515
User 7481297
а дальше у тебя уже сервер должен отвечать за то, чтобы отдать нужный файл по запросу на /assets/images/...
Спасибо за разъяснения
04:20:40 ПП
User 100243492
Салют, ребята!
04:22:28 ПП
User 100243492
User 7481297
настраиваешь в вебпаке лоадер для определённых файлов, например:

module: {
  rules: [
    {
      test: /\.(jpg|png)$/,
      include: /src\/assets/,
      loader: 'file-loader',
      options: {
        name: '[path][name].[hash:5].[ext]'
      }
    }
  ]
}

кроме того, у тебя в конфиге:

context: './src',
output: {
  path: './dist',
  publicPath: '/'
}

вебпак находит, где ты делаешь import или require нужному файлу (тестирует по регулярке в rules.test`), и обрабатывает файл нужным лоадером, в данном случае `file-loader. этот лоадер принимает конфиг (`options.name`), исходя из которого кладёт этот файл в нужную папку с нужным названием.

с таким конфигом, если ты сделаешь

import image from '../../assets/images/my-image.jpg'

вебпак положит его в папку

./dist/assets/images/my-image.f0ab2.jpg

а переменная image (где ты импортируешь этот файл) будет равна

/assets/images/my-image.f0ab2.jpg
Вопрос, почему конфиг соотвтетсвует, а не хотит PNG обрабатывать. А пишет - 
SyntaxError: /Users/artem/develope/js/*****/src/resources/language_images/rus.png: Unexpected character '�' (1:0)
> 1 | �PNG
    | ^
  2 |  
  3 | 
npm ERR! code ELIFECYCLE
04:29:51 ПП
User 97081120
походу у тебя не тот лоадер поймался
04:29:53 ПП
User 97081120
на этом файле
04:30:19 ПП
User 100243492
а как подебажить?
04:32:25 ПП
User 97081120
а покажи конфиг
04:32:32 ПП
User 97081120
глазами подебажим
04:33:31 ПП
User 100243492
https://paste.kde.org/pnjqyih2z
04:37:01 ПП
User 97081120
первое, что вижу, это дичь у тебя с директориями, используй __dirname, вместо cwd и т.п.
04:37:37 ПП
04:37:56 ПП
User 97081120
во-вторых, в стилях забыл $ в конце
04:37:59 ПП
User 97081120
херня конечно
04:38:02 ПП
User 97081120
но мало ли
04:39:01 ПП
User 97081120
в-третьих, я б на твоем месте для картинок тоже url-loader заюзал, чтобы если маленькие, вставлялись датаурлами, и не делали лишних запросов
04:39:14 ПП
User 97081120
а че за херня с лоадером пока не вижу
04:39:23 ПП
User 97081120
а другие картинки грузит, проверял?
04:40:22 ПП
User 97081120
джпеги там
04:40:24 ПП
User 100243492
неа, я тут встрял с тем, что вот импорчу, и она сыпется:
import {SET_LANG, SET_MENU} from '../actions/Types/api';
import userFactory from '../../factory/userFactory';
import RussianFlag from '../../../resources/language_images/rus.png';
и потом в объект ее вставляю для последующего рендера
    languages: {
        'ru': {
            'name': 'RUS',
            'image': RussianFlag,
            // 'image': '',
            'id': 'ru',
            'lang': 'Русский',
        },
04:40:59 ПП
User 97081120
лучше не импорти так
04:41:04 ПП
User 97081120
когда картинок много будет заебешься
04:41:13 ПП
User 100243492
их тут 3 будет
04:41:18 ПП
User 97081120
просто в словаре напили 'image' = require('.....')
04:41:36 ПП
User 97081120
и лучше ресурсы пропиши в резолв чтобы ../.../../ не ебаться
04:42:18 ПП
User 97081120
а у тебя и так написано лол
04:42:49 ПП
User 97081120
так что можешь просто делать 'image': require('resources/language_images/rus.png')
04:43:04 ПП
User 100243492
SyntaxError: /Users/artem/develope/js/****/src/resources/language_images/P_neqF5CFn0.jpg: Unexpected character '�' (1:0)
> 1 | ����
 та же херня
04:43:10 ПП
User 97081120
да херня-то таже
04:43:18 ПП
User 97081120
я ж говорю твою ошибку пока не вижу
04:43:26 ПП
User 97081120
а ты про jpg
04:44:11 ПП
User 100243492
вообще картинки режет
04:44:30 ПП
04:44:32 ПП
User 97081120
кажется есть мысль
04:45:24 ПП
User 97081120
а не проходит ли твоя картинка предварительно через какой-то еще лоадер часом?
04:45:43 ПП
User 100243492
я думал, может он пытается ее через бабель прогонять
04:45:55 ПП
User 100243492
и вдруг не проходит в test с картинками
04:46:30 ПП
User 97081120
подправь-ка регекс в стилях
04:46:32 ПП
User 97081120
чтобы он норм был
04:46:37 ПП
User 97081120
just in case
04:46:42 ПП
User 100243492
поправил
04:48:49 ПП
User 97081120
попробуй хотрелоад нахуй открутить
04:48:52 ПП
User 100243492
и еще странно, раньше он ругался на любое действие в конфиге, а сейчас его меняю как угодно, и ему похеру!
04:49:13 ПП
User 7481297
importLoaders кстати надо поставить не true, а 2
04:49:30 ПП
User 7481297
Типа количество лоадеров перед ним
04:51:20 ПП
User 7481297
А include работает разве как массив путей?
04:53:01 ПП
User 100243492
User 97081120
попробуй хотрелоад нахуй открутить
блять, толи кеш, толи чО, но я ебнул вообще все конфиги и он не реагирует на это никак
04:53:18 ПП
User 97081120
перезапукал вебпак-то сам?)
04:53:35 ПП
User 97081120
User 7481297
А include работает разве как массив путей?
ну как видишь до файлов достучался
04:53:38 ПП
User 100243492
npm run development :)
04:53:41 ПП
User 147771380
User 97081120
в-третьих, я б на твоем месте для картинок тоже url-loader заюзал, чтобы если маленькие, вставлялись датаурлами, и не делали лишних запросов
Кстати, раз уж такая тема, есть ли какой-то быстрый способ применять для маленьких картинок url, а для больших - file лоадеры?
04:54:07 ПП
User 97081120
User 147771380
Кстати, раз уж такая тема, есть ли какой-то быстрый способ применять для маленьких картинок url, а для больших - file лоадеры?
а зачем? урл же поверх файллоадера, просто limit ему проставь
04:54:38 ПП
User 147771380
User 97081120
а зачем? урл же поверх файллоадера, просто limit ему проставь
Блин, всё, пазл сложился
04:54:40 ПП
User 147771380
Спасибо)))
05:05:59 ПП
User 100243492
User 97081120
ну как видишь до файлов достучался
собрал эту хуйню вручную, и собрала картинку О_о
⇒  ./node_modules/.bin/webpack —config webpack/server.babel.js
05:06:12 ПП
05:06:14 ПП
User 97081120
так мб у тебя ран говно?
05:07:06 ПП
User 100243492
"development": "NODE_PATH=./src NODE_ENV=development node ./src/server/server.babel.js",
    "production": "NODE_PATH=./src NODE_ENV=production nodemon  —max_old_space_size=8192 ./src/server/server.babel.js",
05:08:24 ПП
User 100243492
Hash: 42332d1fa21ef50a2b11
Version: webpack 3.5.5
Time: 28984ms
                               Asset     Size  Chunks                    Chunk Names
           5_c0ef52462d92dfdd03ec.js  11.1 kB       5  [emitted]         
1b79d2af6f43c6ef3489d194af364c12.jpg   269 kB          [emitted]  [big]  
           1_51e02d0606888a5f7a8c.js  10.1 kB       1  [emitted]         
           2_eb84377c4c0dba4b3172.js  21.2 kB       2  [emitted]         
           3_11e049b8a8cf6449e17d.js  16.6 kB       3  [emitted]         
           4_e8c413f352fa53d6feb7.js    13 kB       4  [emitted]         
           0_ffda028c99b2ba83f0e5.js   779 kB       0  [emitted]  [big]  
           6_1e51d69cbca7e1d82277.js  6.34 kB       6  [emitted]         
           7_1fbd1fc6881a286c0480.js  10.6 kB       7  [emitted]         
         app_8b5a5c0fd4c9f0d9b4d0.js  1.66 MB       8  [emitted]  [big]  app
      vendor_60dbee26bcaa421bf911.js   456 kB       9  [emitted]  [big]  vendor
    manifest_62c0da32316081bde68e.js  3.63 kB      10  [emitted]         manifest
                             app.css  61.4 kB       8  [emitted]         app

O_o
05:13:43 ПП
User 100243492
а как только пишу: npm run development/production орет на картинку