Ты не понял. Использование вебпака через гульп имеет смысл только тогда, когда есть иные таски, кроме сборки.

Erolast, похоже, что на сегодня слишком много инфы, завтра перечитаю,спасибо).

Объясните, как работает 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?:D

https://github.com/thetalecrafter/img-loader

https://github.com/webpack/html-loader
https://github.com/webpack/css-loader

А вообще:

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

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

***

Что касается задач: WebPack - это сборщик модулей или сайта. Gulp/Grunt - запускальщик тасков.

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

https://github.com/webpack/file-loader

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

Спасибо за ссылку, но html,css,file лоадеры я использовал, но видимо, не так как нужно=)

Для разработки - да, в продакшене же отсутствие поддержки JS у клиента будет еще и ломать всю верстку.

Erolast, ну, а если используется - аля ангуляр/реакт(без серверного рендеринга), то страница и так работать не будет. =)

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

лог консоли
Вот куски конфига.

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()

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

Вопрос про 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'
}

Как сохранить несжатый файл - понятно

// [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(
    'task/build',
    function() {
        return gulp
            .src('./src/index.js')
            .pipe(webpackStream({
                devtool: 'source-map',
                debug: true,
                output: {
                    filename: 'module.js'
                }
            }))
            .pipe(gulp.dest('./dist'));
    }
);

Как минимицировать тоже ясно:

gulp.task(
    'task/build',
    function() {
        return gulp
            .src('./src/index.js')
            .pipe(webpackStream({
                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: 'module.min.js'
                }
            }))
            .pipe(gulp.dest('./dist'));
    }
);

А вот как сохранить и то и другое и описать это в одном конфиге?

Нашел похожий вопрос на стеке: How to build minified and uncompressed bundle with webpack?
Ответы сводятся к
---

В примерах веб-пака нашел multi-compiler.

Т.о. в идеале конфиг будет выглядеть примерно так:

gulp.task(
    pkg.name + '/build',
    function() {
        var 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'}
            ]
        };
        // [url]http://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin[/url]
        var UGLIFY = new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        });
        // [url]http://webpack.github.io/docs/list-of-plugins.html#bannerplugin[/url]
        var BANNER = new webpack.BannerPlugin(
            '/*\n' +
            ' ' + pkg.name + ' v' + pkg.version + '\n' +
            ' ' + pkg.homepage + '\n' +
            '*/\n'
            ,
            {
                entryOnly: true,
                raw: true
            }
        );

        return gulp
            .src('./src/index.js')
            .pipe(webpackStream(
                [
                    // full
                    {
                        module: MODULE,
                        plugins: [BANNER],
                        devtool: 'source-map',
                        output: {
                            library: pkg.name,
                            libraryTarget: 'umd',
                            filename: pkg.name + '.js'
                        }
                    },
                    // min
                    {
                        module: MODULE,
                        plugins: [UGLIFY, BANNER],
                        devtool: 'source-map',
                        output: {
                            library: pkg.name,
                            libraryTarget: 'umd',
                            filename: pkg.name + '.min.js'
                        }
                    }
                ]
            ))
            .pipe(gulp.dest('./dist'));
    }
);

Проблема в том, что webpackStream не поддерживает array of options :)
Посмотрим, что ответит создатель плагина.

У кого есть время и желание написать патч для webpack-stream? :)
https://github.com/shama/webpack-stream/issues/78

//новый адепт вкатился в трэд)
Чуваки, вы вебпаком собираете бэкэнд, так? Если да, то точно так же как и фронтэнд, всё собираете в один бандл или что-то другое придумали?

Есть конфиг для вебпака и dev cервера (один конфиг) запускаю dev сервер с тем конфигом
output у меня на две дериктории выше ../../scripts-dist (для дев сервера как корень установил директорию в которой scripts-dist) и когда пробую получу скрипт по адресу localhost: port/script-dist/ то он отдает статику а не из память, как это решить?

context: __dirname,
  entry: getEntries(),
  output: {
    filename: distDir
  },
  resolve: {
    root: path.resolve('./'),
    modulesDirectories: getModulesDirectories(),
  }

Обычная мультикомпиляция не подойдёт?

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

Новый адепт вкатился в трэд [2]
Хочу попробовать вебпак на боевом проекте, и для этого сначала пытаюсь решить такую задачку:



При дефолтных настройках build layers выглядят примерно как
XA, YAB, ZA.
А я хочу - XA, YA, Z, B. Чтобы модуль B соответсвенно грузился on-demand, и только один раз, если мы запросим x и y.

Вроде доки говорят что для этого CommonsChunkPlugin, но что-то у меня не получается правильно его использовать.

Например я могу сказать так:

module.exports = {
    entry: {
        main: "./main",
        BBuilded: ["B"]
    },
    resolve: {
        modulesDirectories: [
            "."
        ]
    },
    output: {
        publicPath: "js/",
        filename: "[name].builded.js"
    },
    plugins: [

          new CommonsPlugin({
               async: true,
              children: true,
              chunkNames: 'B'
            })
    ]
};

B он вычленит, но из верних слоев не исключит.
Или могу сказать "пройдись по поддереву и выдели общее у всех потомков", но что делать в случае сложнее чет непонятно(

Как описать в одном конфиге сжатую и несжатую версии?
 

Очень часто мне приходится использовать вебпак для сборок модулей/компонентов (npm/bower). Ранее приходилось описывать два конфига сжатойй и несжатой версий. Оказывается, можно сделать в одном.

Тот же самый вопрос, заданный мною ранее http://javascript.ru/forum/showthrea...926#post390986