Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #41 (permalink)  
Старый 30.08.2015, 17:24
Аватар для Erolast
Профессор
Отправить личное сообщение для Erolast Посмотреть профиль Найти все сообщения от Erolast
 
Регистрация: 24.09.2013
Сообщений: 1,436

Сообщение от Lemme Посмотреть сообщение
Например?

К примеру, задачу минификации картинок, webpack вряд ли выполнит, в смысле, не потому, что это нереально, а судя по его идее.

А вот к примеру "собрать спрайт" из папки в файл sprite.png и все данные о спрайте вынести в миксины и переменные какого-то препроцессора?
Ты не понял. Использование вебпака через гульп имеет смысл только тогда, когда есть иные таски, кроме сборки.

Цитата:
gulp - раннер каких угодно тасков, от чистки ./tmp до деплоймента, хоть и использующийся обычно для сборки.
webpack специализирован исключительно для сборки.
Ответить с цитированием
  #42 (permalink)  
Старый 30.08.2015, 17:33
Аватар для Lemme
Профессор
Отправить личное сообщение для Lemme Посмотреть профиль Найти все сообщения от Lemme
 
Регистрация: 15.07.2015
Сообщений: 511

Erolast, похоже, что на сегодня слишком много инфы, завтра перечитаю,спасибо).
Ответить с цитированием
  #43 (permalink)  
Старый 02.09.2015, 16:55
Аватар для Lemme
Профессор
Отправить личное сообщение для Lemme Посмотреть профиль Найти все сообщения от Lemme
 
Регистрация: 15.07.2015
Сообщений: 511

Объясните, как работает file-loader.

Допустим загружаем картинки в папку assets/images
module: {
	loaders: [

		// ...
		{
			test: /\.(jpg|gif|png|svg)$/i,
			loader: 'file?context=' + path.join('app', 'resources', 'images') + '&name=assets/images/[name].[hash].[ext]'
		},
	]
}


Alias для подключения бла-бла-бла..
resolve: {

	// ...
	alias: {
		images:	path.join(_path, 'app', 'resources/images'),
	}
},

Собственно, подключение какой-то картинки
import React from 'react';

// испортим через alias
import logo from 'images/logo.png';

class Logo extends React.Component {
	render() {
		return (
			// а тут подключаем
			<img src={logo} alt="" />
		);
	}
}

export default Logo;


Это имхо - дикое извращение, но оно работает..

Все хорошо хотя нет, вру, нифига не хорошо, хорошо только то, что загружает только использованные изоображения, а их подключение - это жесть.

Но ладно - это прокатит в html, jade etc..., а что мне делать, если я захочу подключить это изоображение в стилях? =) Копипастить из src в dist?

Последний раз редактировалось Lemme, 02.09.2015 в 17:03.
Ответить с цитированием
  #44 (permalink)  
Старый 02.09.2015, 20:03
Аватар для kobezzza
Быдлокодер;)
Отправить личное сообщение для kobezzza Посмотреть профиль Найти все сообщения от kobezzza
 
Регистрация: 19.11.2010
Сообщений: 4,338

Цитата:
К примеру, задачу минификации картинок, webpack вряд ли выполнит, в смысле, не потому, что это нереально, а судя по его идее.
https://github.com/thetalecrafter/img-loader

Цитата:
Но ладно - это прокатит в html, jade etc..., а что мне делать, если я захочу подключить это изоображение в стилях? =) Копипастить из src в dist?
https://github.com/webpack/html-loader
https://github.com/webpack/css-loader

А вообще:

http://webpack.github.io/docs/list-of-loaders.html

Читай документацию, а не придумывай извращения.

***

Что касается задач: WebPack - это сборщик модулей или сайта. Gulp/Grunt - запускальщик тасков.
__________________
kobezzza
code monkey
Ответить с цитированием
  #45 (permalink)  
Старый 02.09.2015, 20:06
Аватар для kobezzza
Быдлокодер;)
Отправить личное сообщение для kobezzza Посмотреть профиль Найти все сообщения от kobezzza
 
Регистрация: 19.11.2010
Сообщений: 4,338

Ещё важно понимать, что по умолчанию WebPack всё тянет в собираемый файл, т.е. можно сделать полностью запускаемый Файл, который содержит в себе стили, вёрстку, логику, картинки (как бейс64) и т.д. но можно делать как обычно, т.е. сохранять всё по разным файлом, для этих задач есть:

https://github.com/webpack/file-loader
__________________
kobezzza
code monkey
Ответить с цитированием
  #46 (permalink)  
Старый 02.09.2015, 21:28
Аватар для Lemme
Профессор
Отправить личное сообщение для Lemme Посмотреть профиль Найти все сообщения от Lemme
 
Регистрация: 15.07.2015
Сообщений: 511

Цитата:
т.е. можно сделать полностью запускаемый Файл, который содержит в себе стили, вёрстку, логику, картинки (как бейс64) и т.д.
Это круто, наверное =)
Цитата:
Читай документацию
Только это и делаю
Цитата:
а не придумывай извращения.
Ууу, нет, это придумал не я.
https://github.com/rambler-digital-s...ck-boilerplate
скину ссылку на файл с шаблоном, чтоб не ковырялся по всему репозиторию
https://github.com/rambler-digital-s.../hello.jade#L6

Цитата:
http://webpack.github.io/docs/list-of-loaders.html
Спасибо за ссылку, но html,css,file лоадеры я использовал, но видимо, не так как нужно=)

Последний раз редактировалось Lemme, 02.09.2015 в 21:56.
Ответить с цитированием
  #47 (permalink)  
Старый 04.09.2015, 18:23
Аватар для Erolast
Профессор
Отправить личное сообщение для Erolast Посмотреть профиль Найти все сообщения от Erolast
 
Регистрация: 24.09.2013
Сообщений: 1,436

Цитата:
Это круто, наверное =)
Для разработки - да, в продакшене же отсутствие поддержки JS у клиента будет еще и ломать всю верстку.
Ответить с цитированием
  #48 (permalink)  
Старый 04.09.2015, 18:45
Аватар для Lemme
Профессор
Отправить личное сообщение для Lemme Посмотреть профиль Найти все сообщения от Lemme
 
Регистрация: 15.07.2015
Сообщений: 511

Цитата:
отсутствие поддержки JS у клиента будет еще и ломать всю верстку
Erolast, ну, а если используется - аля ангуляр/реакт(без серверного рендеринга), то страница и так работать не будет. =)
Ответить с цитированием
  #49 (permalink)  
Старый 04.09.2015, 20:17
Аватар для Lemme
Профессор
Отправить личное сообщение для Lemme Посмотреть профиль Найти все сообщения от Lemme
 
Регистрация: 15.07.2015
Сообщений: 511

Пытаюсь настроить react-hot-loader с webpack-dev-server. Все запускается, в консоли пишет, что апдейтится, но на самом деле - ничего не происходит. Даже webpack-dev-server не перезагружает...

лог консоли
Цитата:
Error: [HMR] Hot Module Replacement is disabled. app.bundle.4ce2f5ca49e19b0a82ac.js line 62 > eval:76:7
[WDS] Hot Module Replacement enabled. client:15:2
[WDS] App updated. Recompiling... client:19:2
[WDS] App hot update... client:65:3
[WDS] App updated. Recompiling... client:19:2
[WDS] App hot update... client:65:3
[WDS] App updated. Recompiling... client:19:2
[WDS] App hot update... client:65:3
[WDS] App updated. Recompiling... client:19:2
[WDS] App hot update... client:65:3
Вот куски конфига.
entry: {
	app: [ path.resolve('app', 'entry', 'index.jsx'), 'webpack/hot/only-dev-server' ],
	vendors: Object.keys(dependencies)
}

module: {
	loaders: [
		{
			test: /\.(jsx|js)$/,
			exclude: path.resolve('node_modules'),
			loader:'react-hot!babel-loader'
		},
	]
}


Кто то сталкивался с таким?
hot включен.

пробовал добавить в ентри
client: 'webpack-dev-server/client?http://localhost:3000'


Решено

Думал, что в настройках webpack-dev-server'a
hot: true
равняется --hot либо
new webpack.HotModuleReplacementPlugin()

оказывается - нет.

Последний раз редактировалось Lemme, 05.09.2015 в 10:20. Причина: Решено.
Ответить с цитированием
  #50 (permalink)  
Старый 16.09.2015, 17:04
Аватар для Lemme
Профессор
Отправить личное сообщение для Lemme Посмотреть профиль Найти все сообщения от Lemme
 
Регистрация: 15.07.2015
Сообщений: 511

Вопрос про url-loader

Ничего страшного не будет (некорректное кодирование или еще что-то), если не указывать mimetype ?

т.е вместо
{
	test: /\.png$/,
	loader: 'url?limit=10000&mimetype=image/png'
},
{
	test: /\.gif$/,
	loader: 'url?limit=10000&mimetype=image/gif'
},
{
	test: /\.jpg$/,
	loader: 'url?limit=10000&mimetype=image/jpeg'
}


записать так
{
	test: /\.(png|gif|jpg)/,
	loader: 'url?limit=10000'
}
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Смишных картинок тред megaupload Оффтопик 3448 03.07.2023 09:47
Обсуждений тред cyber Оффтопик 2135 03.10.2018 08:10
React'а тред melky Оффтопик 246 13.11.2016 08:07
Смешных историй тред monolithed Оффтопик 11 04.03.2015 04:20
Смертельного срача воимя науки тред __он_самый__ Оффтопик 12 08.12.2014 10:15