Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 12.03.2015, 22:04
Аватар для Gozar
Отправить личное сообщение для Gozar Посмотреть профиль Найти все сообщения от Gozar
 
Регистрация: 07.06.2007
Сообщений: 7,504

Сообщение от kobezzza
жесть получается: помещаем наш CSS в JS
Да, жесть. В jsx тоже можно css-сить, но лучше классами
__________________
Последний раз редактировалось Gozar, Сегодня в 24:14.
Ответить с цитированием
  #12 (permalink)  
Старый 13.03.2015, 10:27
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

Сообщение от kobezzza Посмотреть сообщение
Разбираюсь с WebPack и встал вопрос: а нахрена нужны всякие CSS лоадеры и т.д. это же жесть получается: помещаем наш CSS в JS Оо
можно и пикчи в JS класть

т.е. то, что он так делает - это хорошо. вы требуете (require) один файл (например, компонент КНОПКИ), а он автоматически подтянет свои стили и другие ресурсы - согласитесь, меньше запарок)

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

да, модуль начинает тянуть за собой CSS, JS, библиотеки, картинки, шрифты и остальное (причём можно указать, чтобы он это не скачивал, а размещал прямо в скрипте, через dataUrl)

иногда это полезно (для разработки), иногда - нет (для продакшена, ваш К.О.).

для извлечения стилей в отдельный файл есть плагин ExtractTextPlugin

для копирования ресурсов есть file-loader, для включения содержимого файла в data url - url-loader, для включения голого содержимого файла - raw-loader
Ответить с цитированием
  #13 (permalink)  
Старый 13.03.2015, 11:37
Аватар для kobezzza
Быдлокодер;)
Отправить личное сообщение для kobezzza Посмотреть профиль Найти все сообщения от kobezzza
 
Регистрация: 19.11.2010
Сообщений: 4,338

melky, понял, спасибо.

***

Ещё вопрос: разбираюсь с чанковой сборкой, а именно с common чанками и вот такая трабла:

webpack({
	context: path.resolve(__dirname, 'app'),

	entry: {
		app: './index',
		base: './base'
	},

	output: {
		path: path.resolve(__dirname, 'dist'),
		filename: '[name].js'
	},

	module: {
		loaders: [
			{
				test: /\.js$/,
				exclude: /node_modules/,
				loader: 'babel-loader'
			}
		]
	},

	plugins: [
		new webpack.optimize.CommonsChunkPlugin({
			name: 'base'
		})
	]

}, function (err) {
	if (err) {
		console.error(err);
	}
});


Не работает, вываливается с ошибкой в app, мол ./index не существует, но если base записать как массив, то всё ок

base: ['./base']


Баг или фича?
__________________
kobezzza
code monkey
Ответить с цитированием
  #14 (permalink)  
Старый 14.03.2015, 20:27
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

Сообщение от kobezzza
Баг или фича?
хз а если прописать еще и расширение файла?
Ответить с цитированием
  #15 (permalink)  
Старый 14.03.2015, 20:43
Аватар для kobezzza
Быдлокодер;)
Отправить личное сообщение для kobezzza Посмотреть профиль Найти все сообщения от kobezzza
 
Регистрация: 19.11.2010
Сообщений: 4,338

Сообщение от melky Посмотреть сообщение
хз а если прописать еще и расширение файла?
Тоже самое Ну так или иначе, в форме массива оно работает.
__________________
kobezzza
code monkey
Ответить с цитированием
  #16 (permalink)  
Старый 19.03.2015, 14:30
Аватар для nerv_
junior
Отправить личное сообщение для nerv_ Посмотреть профиль Найти все сообщения от nerv_
 
Регистрация: 29.11.2011
Сообщений: 3,924

оказывается, webpack умеет umd =)
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
Ответить с цитированием
  #17 (permalink)  
Старый 12.07.2015, 10:17
Аватар для nerv_
junior
Отправить личное сообщение для nerv_ Посмотреть профиль Найти все сообщения от nerv_
 
Регистрация: 29.11.2011
Сообщений: 3,924

Как писать таски для gulp на es6
package.json (для винды)
{
    "scripts": {
        "gulpes6": "./node_modules/.bin/webpack.cmd --progress --colors --config webpack.gulpfile.js",
    }
}

gulpfile.es6
import gulp from 'gulp';
// обязательно именно так "from gulp"
// если писать по другому, вебпак будет пытается запихнуть в bundle

webpack.gulpfile.js
'use strict';

var fs = require("fs");

module.exports = {
    entry: './gulpfile.es6',
    target: 'node',
    externals: fs.readdirSync('node_modules'),
    output: {
        path: './',
        filename: 'gulpfile.js',
        libraryTarget: 'commonjs'
    },
    module: {
        loaders: [
            // [url]https://github.com/babel/babel-loader[/url]
            {test: /\.(?:es6|js)$/, loader: 'babel'}
        ]
    }
};


запускаем в терминале
npm run gulpes6

будет собран gulpfile.js из gulpfile.es6
после чего можно запускать таски галпа обычным способом(через терминал или IDE)


по материалам ссылка

Последний раз редактировалось nerv_, 12.07.2015 в 10:56.
Ответить с цитированием
  #18 (permalink)  
Старый 24.07.2015, 01:30
Аватар для nerv_
junior
Отправить личное сообщение для nerv_ Посмотреть профиль Найти все сообщения от nerv_
 
Регистрация: 29.11.2011
Сообщений: 3,924

этот конфиг на примере gulp'а:

package.json
{
    "name": "project_name",
    "version": "0.0.0",
    "private": true,
    "description": "",
    "dependencies": {
        "babel": "^4.7.16",
        "babel-loader": "^4.0.0",
        "json-loader": "^0.5.1",
        "html-loader": "^0.2.3",
        "gulp": "^3.9.0",
        "webpack": "^1.10.1",
        "webpack-stream": "^2.0.0"
    },
    "scripts": {
    }
}


gulpfile.js
// [url]https://github.com/gulpjs/gulp/blob/master/docs/README.md[/url]
var gulp = require('gulp');
// [url]http://webpack.github.io/docs/[/url]
var webpack = require('webpack');
// [url]https://github.com/shama/webpack-stream[/url]
var webpackStream = require('webpack-stream');


gulp.task(
    'xmlmarket/build',
    function() {
        return gulp
            .src('./httpdocs/js/angular/application/modules/xmlmarket/module.js')
            .pipe(webpackStream({
                module: {
                    loaders: [
                        // [url]https://github.com/babel/babel-loader[/url]
                        {test: /\.js$/, loader: 'babel'},
                        // [url]https://github.com/webpack/json-loader[/url]
                        {test: /\.json$/, loader: 'json'},
                        // [url]https://github.com/webpack/html-loader[/url]
                        {test: /\.html$/, loader: 'html'}
                    ]
                },
                plugins: [
                    // [url]http://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin[/url]
                    new webpack.optimize.UglifyJsPlugin({
                        compress: {
                            warnings: false
                        }
                    })
                ],
                devtool: 'source-map',
                debug: true,
                output: {
                    filename: 'angular-xmlmarket.min.js'
                }
            }))
            .pipe(gulp.dest('./httpdocs/js/angular/modules/'));
    }
);


gulp.task(
    'xmlmarket/watch', function() {
        return gulp
            .watch(
                [
                    './httpdocs/js/angular/application/modules/xmlmarket/**/*.js',
                    './httpdocs/js/angular/application/modules/xmlmarket/**/*.json',
                    './httpdocs/js/angular/application/modules/xmlmarket/**/*.html'
                ],
                [
                    'xmlmarket/build'
                ]
        );
    }
);
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
Ответить с цитированием
  #19 (permalink)  
Старый 10.08.2015, 14:28
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

как заставить webpack игнорить ошибки, т.е если он не нашел require("module") то он так и оставил, а не заменял на ошибку
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #20 (permalink)  
Старый 10.08.2015, 23:51
Аватар для kobezzza
Быдлокодер;)
Отправить личное сообщение для kobezzza Посмотреть профиль Найти все сообщения от kobezzza
 
Регистрация: 19.11.2010
Сообщений: 4,338

Сообщение от cyber Посмотреть сообщение
как заставить webpack игнорить ошибки, т.е если он не нашел require("module") то он так и оставил, а не заменял на ошибку
http://webpack.github.io/docs/list-o...l#ignoreplugin
__________________
kobezzza
code monkey
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Смишных картинок тред 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