Webpack'а тред
Открою тред вопросом по source-map.
Текущая генерация карт ставит под вопрос безопасность. Первое упоминание этого вопроса мной Более подробное описание вопроса Кто виноват и что делать? :) |
Попытаюсь задать еще один вопрос: как прописать конфигурацию веб-пака, чтобы он выдавал полную и минифицированную версию?
для гранта конфиг выглядит так
// webpack
// [url]http://babeljs.io/docs/using-babel/#webpack[/url]
// [url]https://github.com/webpack/grunt-webpack[/url]
webpack: {
// common
options: {
entry: {
common: ENTRY_PATH,
},
output: {
path: OUTPUT_PATH,
filename: '[name].js'
},
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: [
new webpack.optimize.UglifyJsPlugin()
]
}
}
Соответственно, как только я подключаю плагин UglifyJs, получаю сжатую версию. Хотелось бы и ту и другую и не копировать конфиг :) |
Тоже хотел бы знать ответ. :)
|
Цитата:
конфиги вебпака - исполняемые файлы, возвращающие массив настроек или настройки сборки создайте вызываемый файл фабрики конфига и передавайте фабрики параметры, для гибкости пример показать? |
Цитата:
|
Цитата:
В самых крайних случаях для отладки можно просто настройку сжатия в конфиге комментить) |
Цитата:
/////////////////////////////////////////////////////////////////////
//// ////
//// БАЗОВЫЙ ФАЙЛ ДЛЯ СОЗДАНИЯ КОНФИГУРАЦИИ СБОРКИ ////
//// ////
/////////////////////////////////////////////////////////////////////
'use strict';
var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
// частицы сборки конфига
var makers = {
// массив лоадеров
loaders: function (specific, common) {
var loaders = []
var add = function (loader) { loaders.push(loader) }
// общие плагин. экспорт переменных в ГО
add({test: /(react)|(react\/addons)$/, loader: 'expose?React'})
add({test: /\/jquery.js$/, loader: 'expose?jQuery'})
add({test: /\.json$/, loader: "json"})
// ES6 и JSX
add({test: /(\.jsx)|(\.js)$/, exclude: /(node_modules)|(vendor)/, loader: 'babel'})
// разметка
if (specific.html) {
add({ test: /\.html/, loader: 'html?attrs=link:href' })
}
// стили
if (common.extractText) {
add({test: /\.css$/, loader: ExtractTextPlugin.extract("style", "css!autoprefixer")})
add({test: /\.styl$/, loader: ExtractTextPlugin.extract("style", "css!autoprefixer!stylus")})
add({test: /\.less$/, loader: ExtractTextPlugin.extract("style", "css!autoprefixer!less")})
} else {
add({test: /\.css$/, loader: "style!css!autoprefixer"})
add({test: /\.styl$/, loader: "style!css!autoprefixer!stylus"})
add({test: /\.less$/, loader: "style!css!autoprefixer!less"})
}
// картинки
if (specific.images) {
add({test: /\.(png|jpg|gif)$/, loader: 'file?limit=8192'})
}
// шрифты
if (specific.fonts) {
add({test: /\.woff.?$/, exclude: /vendor/, loader: "file?limit=10000&minetype=application/font-woff" })
add({test: /fonts\/.*\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, exclude: /vendor/, loader: "file"})
}
if (specific.inlineSVGIcons) {
add({test: /icon-.+\.(svg)$/, exclude: /(node_modules)|(vendor)/, loader: 'raw'})
}
if (specific.kendo) {
add({test: /kendo\-ui\-core[\///].*\.js$/, loader: "imports?jQuery=jquery"})
}
return loaders
},
// массив плагинов
plugins: function (specific, common) {
var plugins = []
var add = function (plugin) { plugins.push(plugin) }
add(new webpack.NoErrorsPlugin())
if (common.extractText) {
add(new ExtractTextPlugin("[name].css"))
}
if (specific.prefetch && specific.prefetch.length) {
specific.prefetch.forEach(function (prefetchModule) {
add(new webpack.PrefetchPlugin(prefetchModule))
})
}
if (specific.hot) {
add(new webpack.HotModuleReplacementPlugin())
}
if (specific.provide) {
add(new webpack.ProvidePlugin(specific.provide))
}
if (specific.define) {
add(new webpack.DefinePlugin(specific.define))
}
return plugins
},
preLoaders: function (specific, common) {
var preLoaders = []
var add = function (preloader) { preLoaders.push(preloader) }
add({test: /\.js$/, exclude: /(node_modules)|(bootstrap.config)/, loader: "source-map"})
if (specific.globals) {
add({test: /src\/scripts\/.+(\.jsx)|(\.js)$/, exclude: /(node_modules)|(admin)\//, loader: 'imports?globals=scripts/globals.js'})
}
return preLoaders
},
}
module.exports = function makeWebpackConfig (options) {
return {
plugins: makers.plugins(options.plugins || {}, options),
output: {
pathinfo: true,
filename: '[name].js',
// publicPath: '/assets/'
},
entry: options.entry,
cache: true,
debug: true,
devtool: '#source-map',
stats: {
timings: true,
colors: true,
reasons: true
},
resolve: {
root: __dirname,
alias: options.aliases,
},
module: {
preLoaders: makers.preLoaders(options.preLoaders || {}, options),
loaders: makers.loaders(options.loaders || {}, options),
noParse: [/js\/vendor/]
},
node: {
buffer: false
}
}
}
Сборка разработки:
///////////////////////////////////////////////////////////
//// ////
//// КОНФИГУРАЦИЯ WEBPACK ДЛЯ РАЗРАБОТКИ ////
//// ////
///////////////////////////////////////////////////////////
var path = require('path');
// фабрика конфигурации
var makeConfig = require('./webpack.config.base.js');
// клиентское приложение
var client = makeConfig({
extractText: true,
entry: {
'main': [
// 'webpack/hot/only-dev-server',
'webpack/hot/dev-server',
// "bootstrap-webpack!./bootstrap.config.js",
'./js/main-webpack.js'
]
},
plugins: {
hot: true,
provide: {
'jQuery': 'jquery',
},
define: {
'global.BACKEND_HOST': '"http://localhost:8080/"',
'process.env.NODE_ENV': '"development"',
'global.SIDE': '"frontend"',
'process.env.BLUEBIRD_DEBUG': '1',
'__DEV__': 'true',
},
},
loaders: {
html: true,
images: true,
fonts: true,
}
});
module.exports = [client];
ну, для продакшена нету, но идею можно уловить :) |
|
Разбираюсь с WebPack и встал вопрос: а нахрена нужны всякие CSS лоадеры и т.д. это же жесть получается: помещаем наш CSS в JS Оо
|
Цитата:
сам использую .js, .json, .html в последнем описываются шаблоны (чтобы не аяксить) |
Цитата:
|
Цитата:
т.е. то, что он так делает - это хорошо. вы требуете (require) один файл (например, компонент КНОПКИ), а он автоматически подтянет свои стили и другие ресурсы - согласитесь, меньше запарок) бутстрапчег подключать заметно легче... или вообще что-то, что тянет за собой спектр зависимостей да, модуль начинает тянуть за собой CSS, JS, библиотеки, картинки, шрифты и остальное (причём можно указать, чтобы он это не скачивал, а размещал прямо в скрипте, через dataUrl) иногда это полезно (для разработки), иногда - нет (для продакшена, ваш К.О.). для извлечения стилей в отдельный файл есть плагин ExtractTextPlugin для копирования ресурсов есть file-loader, для включения содержимого файла в data url - url-loader, для включения голого содержимого файла - raw-loader |
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'] Баг или фича? |
Цитата:
|
Цитата:
|
оказывается, webpack умеет umd =)
|
Как писать таски для 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) по материалам ссылка |
этот конфиг на примере 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'
]
);
}
);
|
как заставить webpack игнорить ошибки, т.е если он не нашел require("module") то он так и оставил, а не заменял на ошибку
|
Цитата:
|
kobezzza, я знаю об этой штуке, но она всеравно вставляет ошибки если модуля нет.
|
Цитата:
|
kobezzza, еще не много бардак, я его переделываю по 200 раз)
var ignore = new webpack.IgnorePlugin( /columnUtils/g );
webpack ( {
// context: path.join( __dirname, "utils" ),
context: __dirname,
debug: true,
devtool: 'source-map',
// entry: "./utils.core.js" ,
entry: "./core.js" ,
output: {
// filename: "utils.js",
filename: "app.c.js",
// sourceMapFilename: "dist/widget.sourcemap.js"
},
resolve: {
// modulesDirectories: [ path.resolve( __dirname, ".." ), path.resolve( __dirname, "..", "cultures" ), path.resolve( __dirname, "..", "..", "_libs", "cultures/kendoui/cultures" ) ],
modulesDirectories: [ path.join( __dirname, "utils" ), path.join( __dirname, "libs" ) ],
},
module: {
loaders: [
{ test: "/\.js$/", loader: "c-loader" }
],
plugins: [
ignore
]
}
}, function (err) {
// gulp.run( "compress" );
callback();
} );
|
cyber, вечером гляну
|
kobezzza, thanks)
|
Я так понимаю вебпак ломает от таких зависимостий?
точнее добавляет ошибку как будето app.js нету app.js
{
xx: require("./x/xxx"),
yy: require("./y/yyy")
}
xx.js require( "../app" ).yy П.с как такие зависимости называются на англ? |
Исключение файлов из сборки:
var webpack = require('webpack');
module.exports = {
context: __dirname,
entry: './index',
externals: [
/sub/
],
output: {
libraryTarget: 'commonjs',
path: __dirname + '/dist',
filename: 'bundle.js'
}
};
http://webpack.github.io/docs/config...html#externals http://webpack.github.io/docs/librar...externals.html |
Цитата:
Веб-пак очень умный, но его нужно правильно настроить. |
Цитата:
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
|
Короче долго не мог понять почему вебпак собирает с 150кб, 3 мб, окзалось у меня в папке лежал gulpfile и его тоже подключало, и оно подключало код из исходников ноды который тоже собирался)
|
Цитата:
|
По поводу цикличных ссылок:
https://github.com/webpack/webpack/issues/300 Т.е. разводим файлы на разные бандлы или ждём webpack-2 :) |
Цитата:
Цитата:
|
Объясните мне суть WebPack'a, то, что он собирает js, css это я знаю, то, что webpack сборщик модулей, это я тоже знаю. Но меня вводит в недоумение от непонимания его использование совместно с gulp'ом.
Ведь, gulp может все тоже самое, что и WebPack, зачем их использовать вместе? :blink: А, как говорится - модульность? Дак: es6+babel = модульность в js stylus и так умеет импорить, а если сравнивать без препроцессора, то gulp-minify-css, преобразует импорты в подключение css файла. для html jade имеет include, а без него использовать https://www.npmjs.com/package/gulp-rigger этот плагин ваще подключит все что угодно, куда угодно... Мб я на него не так смотрю, ткните носом. =) |
Цитата:
gulp - раннер каких угодно тасков, от чистки ./tmp до деплоймента, хоть и использующийся обычно для сборки. webpack специализирован исключительно для сборки. Смысл использовать вебпак совместно с гульпом есть, если в проекте кроме сборки требуются еще какие-то таски. |
Цитата:
К примеру, задачу минификации картинок, webpack вряд ли выполнит, в смысле, не потому, что это нереально, а судя по его идее. А вот к примеру "собрать спрайт" из папки в файл sprite.png и все данные о спрайте вынести в миксины и переменные какого-то препроцессора? |
| Часовой пояс GMT +3, время: 02:49. |