Webpack'а тред

[Gozar]

жесть получается: помещаем наш CSS в JS

Да, жесть. В jsx тоже можно css-сить, но лучше классами

[melky]

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

можно и пикчи в JS класть

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

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

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

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

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

для копирования ресурсов есть file-loader, для включения содержимого файла в data url - url-loader, для включения голого содержимого файла - raw-loader

[kobezzza]

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']

Баг или фича?

[melky]

Баг или фича?

хз а если прописать еще и расширение файла?

[kobezzza]

хз а если прописать еще и расширение файла?

Тоже самое Ну так или иначе, в форме массива оно работает.

[nerv_]

оказывается, webpack умеет umd =)

[nerv_]

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_]

этот конфиг на примере 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'
                ]
        );
    }
);

[cyber]

как заставить webpack игнорить ошибки, т.е если он не нашел require("module") то он так и оставил, а не заменял на ошибку

[kobezzza]

как заставить webpack игнорить ошибки, т.е если он не нашел require("module") то он так и оставил, а не заменял на ошибку

http://webpack.github.io/docs/list-o...l#ignoreplugin