Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.02.2015, 10:41
Аватар для nerv_
junior
Отправить личное сообщение для nerv_ Посмотреть профиль Найти все сообщения от nerv_
 
Регистрация: 29.11.2011
Сообщений: 3,924

Webpack'а тред
Открою тред вопросом по source-map.

Текущая генерация карт ставит под вопрос безопасность.
Первое упоминание этого вопроса мной
Более подробное описание вопроса

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

Попытаюсь задать еще один вопрос: как прописать конфигурацию веб-пака, чтобы он выдавал полную и минифицированную версию?
для гранта конфиг выглядит так

// 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, получаю сжатую версию. Хотелось бы и ту и другую и не копировать конфиг
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
Ответить с цитированием
  #3 (permalink)  
Старый 05.03.2015, 12:16
Аватар для Gozar
Отправить личное сообщение для Gozar Посмотреть профиль Найти все сообщения от Gozar
 
Регистрация: 07.06.2007
Сообщений: 7,504

Тоже хотел бы знать ответ.
__________________
Последний раз редактировалось Gozar, Сегодня в 24:14.
Ответить с цитированием
  #4 (permalink)  
Старый 05.03.2015, 14:06
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

Сообщение от Gozar Посмотреть сообщение
Тоже хотел бы знать ответ.
ларчик просто открывается

конфиги вебпака - исполняемые файлы, возвращающие массив настроек или настройки сборки

создайте вызываемый файл фабрики конфига и передавайте фабрики параметры, для гибкости

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

Сообщение от melky
пример показать?
Да, было бы здорово.
__________________
Последний раз редактировалось Gozar, Сегодня в 24:14.
Ответить с цитированием
  #6 (permalink)  
Старый 05.03.2015, 17:49
Аватар для nerv_
junior
Отправить личное сообщение для nerv_ Посмотреть профиль Найти все сообщения от nerv_
 
Регистрация: 29.11.2011
Сообщений: 3,924

Сообщение от Gozar
Да, было бы здорово
А вообще я сейчас подумал, нафига мне несжатая версия, если есть source-map?
В самых крайних случаях для отладки можно просто настройку сжатия в конфиге комментить)
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
Ответить с цитированием
  #7 (permalink)  
Старый 06.03.2015, 11:05
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

Сообщение от Gozar Посмотреть сообщение
Да, было бы здорово.
базовый конфиг webpack.config.base.js:
/////////////////////////////////////////////////////////////////////
////                                                             ////
////        БАЗОВЫЙ ФАЙЛ ДЛЯ СОЗДАНИЯ КОНФИГУРАЦИИ СБОРКИ        ////
////                                                             ////
/////////////////////////////////////////////////////////////////////

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


ну, для продакшена нету, но идею можно уловить
Ответить с цитированием
  #8 (permalink)  
Старый 10.03.2015, 12:34
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

WEBPACK 2
Ответить с цитированием
  #9 (permalink)  
Старый 12.03.2015, 20:45
Аватар для kobezzza
Быдлокодер;)
Отправить личное сообщение для kobezzza Посмотреть профиль Найти все сообщения от kobezzza
 
Регистрация: 19.11.2010
Сообщений: 4,338

Разбираюсь с WebPack и встал вопрос: а нахрена нужны всякие CSS лоадеры и т.д. это же жесть получается: помещаем наш CSS в JS Оо
__________________
kobezzza
code monkey
Ответить с цитированием
  #10 (permalink)  
Старый 12.03.2015, 20:48
Аватар для nerv_
junior
Отправить личное сообщение для nerv_ Посмотреть профиль Найти все сообщения от nerv_
 
Регистрация: 29.11.2011
Сообщений: 3,924

Сообщение от kobezzza
Разбираюсь с WebPack и встал вопрос: а нахрена нужны всякие CSS лоадеры и т.д. это же жесть получается: помещаем наш CSS в JS Оо
видимо, чтобы из компонет проект собирать
сам использую .js, .json, .html
в последнем описываются шаблоны (чтобы не аяксить)
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
Ответить с цитированием
Ответ



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

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


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