@webpack_ru
Webpack — русскоговорящее сообщество

Обсуждения webpack, лоадеров, плагинов и сборок Правила: http://bit.ly/our_etiquette См. также: @rollup_ru, @react_js, @vscode_ru, @macos_ru, @js_ru

974 members

Архив канала @webpack_ru 19 марта 2018 г.

06:30:14 ДП
User 146658406
Доброе утро. А как можно в webpack-dev-middleware прокинуть —env.dev как в ключах командной строки?
06:34:40 ДП
User 212795634
User 146658406
Доброе утро. А как можно в webpack-dev-middleware прокинуть —env.dev как в ключах командной строки?
По-моему никак
06:34:46 ДП
User 212795634
Не видел в доке
06:35:53 ДП
User 146658406
Не, можно, этот env прокидывается как module.exports = function(env) { в конфиге. 
Значит этому webpack-dev-middleware надо подкинуть конфиг навроде
var webpackConfig = require('./webpack/webpack.config.js')({
  dev: true
});
06:36:31 ДП
User 146658406
Пока не знаю правда ли это - т.к. накосячил где-то еще
06:36:36 ДП
User 212795634
У а, ну да, но у 4 вебпака есть mode
06:37:55 ДП
User 146658406
да, его-то я и выставляю в конфиге в зависимости от того что прокинуто извне.
07:09:58 ДП
User 146658406
как-то замороченно, есть
NODE_ENV="production" webpack блабла
webpack -p блабла
webpack —env.production блабла

и новый (wp4)
webpack —mode production
07:10:11 ДП
User 146658406
кто точно разницу знает? )
07:10:31 ДП
User 146658406
в общем-то, пока все работает, но ощущение что в трех соснах заблудился, осталось
07:20:31 ДП
User 67164223
User 146658406
как-то замороченно, есть
NODE_ENV="production" webpack блабла
webpack -p блабла
webpack —env.production блабла

и новый (wp4)
webpack —mode production
в 4 продакшен мод запускает углифай
07:21:01 ДП
User 146658406
Хоть свою вики пиши =)
07:21:07 ДП
User 67164223
так это всё есть
07:21:24 ДП
User 146658406
Собранное в одном месте? =\
07:22:06 ДП
User 67164223
User 146658406
Собранное в одном месте? =\
в доке по вебпаку есть инфа про окружения
07:22:20 ДП
User 67164223
а инфа про моды в вебпаке 4 есть на медиуме в блоге разрабов
07:22:32 ДП
User 67164223
т.к по 4 версии доки нет
07:23:20 ДП
User 146658406
а инфа о том использует ли webpack 3 или 4 переменную NODE_ENV = "dev' / "production" в своих целях есть?
07:23:29 ДП
User 146658406
или это исключитеьно для нас настройка
07:23:36 ДП
User 67164223
User 146658406
а инфа о том использует ли webpack 3 или 4 переменную NODE_ENV = "dev' / "production" в своих целях есть?
в смысле использует?
07:23:46 ДП
User 67164223
ты её добавляешь, что сборки различались
07:23:58 ДП
User 67164223
внутри конфига описываешь условия
07:24:03 ДП
User 67164223
по окружению
07:24:10 ДП
User 146658406
наподобие того как он подключает сам аглифай если прокинуть —mode production
07:24:21 ДП
User 212795634
User 146658406
а инфа о том использует ли webpack 3 или 4 переменную NODE_ENV = "dev' / "production" в своих целях есть?
Нет, не использует, бабель может только
07:24:44 ДП
User 146658406
"может только", о чем и речь, сплошные подозрения на самодеятельность
07:24:47 ДП
User 212795634
У вебпака есть флаги, -p до 3й версии включительно
07:24:52 ДП
User 212795634
Дальше сами знаете
07:25:05 ДП
User 212795634
User 146658406
"может только", о чем и речь, сплошные подозрения на самодеятельность
Нет, у Бабеля в доке написано
07:25:48 ДП
User 146658406
"уважаемый дядя менеджер, выдели мне неделю чтобы я прочитал от и до доки на все версии вебпака и его плагины"
07:26:24 ДП
User 67164223
User 146658406
"уважаемый дядя менеджер, выдели мне неделю чтобы я прочитал от и до доки на все версии вебпака и его плагины"
а как ты хотел, лол?
07:26:32 ДП
User 67164223
после работы читай
07:26:33 ДП
07:26:50 ДП
User 67164223
свои мозги тебе кто-нибудь не пересадит
07:26:50 ДП
User 146658406
ладно фтопку нытье) спс за инфу
07:31:21 ДП
User 377238783
Привет. Подскажите пожалуйста, не могу решить проблему никак. Есть несколько scss модулей, которые собираются с помощью extract-text-webpack-plugin. 
{
  test: /\.(scss|sass)$/,
  use: ExtractTextPlugin.extract({
    use: [
    {
      loader: 'css-loader',
      options: {
        minimize: true,
        sourceMap: true,
      }
    },
    {
      loader: "sass-loader",
      options: {
        sourceMap: true
      }
    }
    ],
  })
},
и выгружается в 'static/css/style.css`
new ExtractTextPlugin(
      {filename: 'static/css/style.css'}
),
Проблема в том, что если я указываю опцию filename с указанием нужной мне директории, то файлы картинок из scss модулей не подгружаются, т.к. имеют неправильный адрес запроса (получается что-то типа /static/css/static/images/bg.jpg, т.е. повторяется 2 раза). Если опцию filename не указывать вообще, то css выгружается в /dist и все работает т.к. путь к картинке совпадает. Но мне необходимо именно в static/css

Пробовал добавить url:false в опции css-loader, но тогда изображение не копируется в директорию, а просто игнорируется
07:42:59 ДП
User 67164223
User 377238783
Привет. Подскажите пожалуйста, не могу решить проблему никак. Есть несколько scss модулей, которые собираются с помощью extract-text-webpack-plugin. 
{
  test: /\.(scss|sass)$/,
  use: ExtractTextPlugin.extract({
    use: [
    {
      loader: 'css-loader',
      options: {
        minimize: true,
        sourceMap: true,
      }
    },
    {
      loader: "sass-loader",
      options: {
        sourceMap: true
      }
    }
    ],
  })
},
и выгружается в 'static/css/style.css`
new ExtractTextPlugin(
      {filename: 'static/css/style.css'}
),
Проблема в том, что если я указываю опцию filename с указанием нужной мне директории, то файлы картинок из scss модулей не подгружаются, т.к. имеют неправильный адрес запроса (получается что-то типа /static/css/static/images/bg.jpg, т.е. повторяется 2 раза). Если опцию filename не указывать вообще, то css выгружается в /dist и все работает т.к. путь к картинке совпадает. Но мне необходимо именно в static/css

Пробовал добавить url:false в опции css-loader, но тогда изображение не копируется в директорию, а просто игнорируется
гугли в сторону publicPath
07:49:04 ДП
User 377238783
Я думал об этом. Если не добавить url:false то получается типа такого
07:49:05 ДП
User 377238783
User 67164223
гугли в сторону publicPath
07:49:56 ДП
User 377238783
если же его добавлять, то изображение игнорируется и не копируется в директорию dist
07:53:43 ДП
User 146658406
User 377238783
Я думал об этом. Если не добавить url:false то получается типа такого
привет, у меня не сасс, но проблему решал в два захода
07:53:47 ДП
07:54:34 ДП
User 146658406
в стилях путях, что-то вроде     src: url("~fonts/Roboto-Regular.eot");
(обрати внимание на тильду)
07:54:42 ДП
User 67164223
бля, какую-то дичь советуете
07:55:02 ДП
07:55:10 ДП
User 67164223
вот папка, где у вас стили и прочее говно
07:55:22 ДП
User 119990994
User 67164223
можешь показать шо в папке theme?
07:55:31 ДП
User 67164223
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = paths => ({
  module: {
    rules: [
      {
        test: /\.scss$/,
        include: paths,
        exclude: /node_modules/,
        use: ExtractTextPlugin.extract({
          publicPath: '../',
          fallback: 'style-loader',
          use: ['css-loader', 'sass-loader'],
        }),
      },
      {
        test: /\.css$/,
        include: paths,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader',
        }),
      },
    ],
  },
  plugins: [
    new ExtractTextPlugin('./css/[name].css'),
  ],
});
07:55:36 ДП
User 67164223
вот лоадер на стили
07:55:43 ДП
User 146658406
И в     resolve: {  modules: [ добавь путь к ассетам, на которые ссылаешься, чтобы вебпак их видел
07:55:47 ДП
User 67164223
User 119990994
можешь показать шо в папке theme?
js файл с объектом
07:56:14 ДП
User 146658406
Ну не знаю, дичь-не-дичь, выглядит логично и не зависит от publicPath
07:56:21 ДП
User 119990994
User 67164223
js файл с объектом
Ну вот именно он мне и интересен. Хочу посмотреть как нид пилить темы
07:57:09 ДП
User 67164223
User 119990994
Ну вот именно он мне и интересен. Хочу посмотреть как нид пилить темы
стайл гайд смотришь компонентов, которые юзаешь и под них пилишь
07:57:10 ДП
User 146658406
Я пилю через material-ui@next, там встроен jss и подробно показано как юзать withStyles
07:57:31 ДП
User 146658406
В примерах на компоненты, прям копируй не хочу
07:57:39 ДП
User 119990994
Понял, спасибо
07:57:48 ДП
User 67164223
User 146658406
Я пилю через material-ui@next, там встроен jss и подробно показано как юзать withStyles
когда юзаешь jss, нужно использовать jssprovider
07:58:44 ДП
User 146658406
      <MuiThemeProvider theme={createMuiTheme(ProjectRawTheme)}> 
там это так выглядит, а RawTheme это файл с конфигом темы. Но можно и не прокидывать тему, а покомпонентно описывать стили
07:59:02 ДП
User 146658406
Хотя, DRY...
08:00:39 ДП
User 377238783
User 67164223
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = paths => ({
  module: {
    rules: [
      {
        test: /\.scss$/,
        include: paths,
        exclude: /node_modules/,
        use: ExtractTextPlugin.extract({
          publicPath: '../',
          fallback: 'style-loader',
          use: ['css-loader', 'sass-loader'],
        }),
      },
      {
        test: /\.css$/,
        include: paths,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader',
        }),
      },
    ],
  },
  plugins: [
    new ExtractTextPlugin('./css/[name].css'),
  ],
});
спасибо, помогло
08:02:42 ДП
User 377238783
User 67164223
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = paths => ({
  module: {
    rules: [
      {
        test: /\.scss$/,
        include: paths,
        exclude: /node_modules/,
        use: ExtractTextPlugin.extract({
          publicPath: '../',
          fallback: 'style-loader',
          use: ['css-loader', 'sass-loader'],
        }),
      },
      {
        test: /\.css$/,
        include: paths,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader',
        }),
      },
    ],
  },
  plugins: [
    new ExtractTextPlugin('./css/[name].css'),
  ],
});
а нет, не помогло. Унес директорию css в static и опять та же беда с адресом
08:05:37 ДП
User 377238783
publicPath: '../../' решил проблему, спс
12:40:39 ПП
User 22258774
Ребят, кто переходил с 3 на 4 версию, скажите как extract-text-webpack-plugin заменить?
12:41:16 ПП
User 22258774
И что делать с CommonsChunkPlugin
12:42:18 ПП
User 182613717
заменить на splitChunks https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693
gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693
GitHub is where people build software. More than 28 million people use GitHub to discover, fork, and contribute to over 85 million projects.
12:43:45 ПП
User 22258774
То есть было так:

    plugins: [
      new Webpack.optimize.CommonsChunkPlugin { name: ['app', 'vendor', 'polyfills'] }
12:44:06 ПП
User 22258774
А нужно теперь в splitChunks всё переписывать?
12:45:09 ПП
User 182613717
да, его выпилили от слова совсем в 4 версии
12:46:27 ПП
User 22258774
А что на счет extract-text-webpack-plugin?
12:47:03 ПП
User 22258774
Я его для одной цсс-ки юзал, есть вариант это как-то пофиксить без гуглежа двухдневного?
12:47:25 ПП
User 67164223
User 22258774
А что на счет extract-text-webpack-plugin?
новая версия есть
12:47:33 ПП
User 22258774
Которая альфа?
12:47:40 ПП
User 67164223
User 22258774
Которая альфа?
ну последняя
12:47:41 ПП
12:47:45 ПП
User 67164223
я не помню
12:47:47 ПП
User 67164223
последняя
12:48:07 ПП
User 67164223
она также работает
12:57:00 ПП
User 22258774
Они и pug-loader сломали шоль?
01:04:09 ПП
User 67164223
User 22258774
Они и pug-loader сломали шоль?
никто не ломал ничего
01:04:17 ПП
User 67164223
лоадер должен обновится под новое апи
01:04:19 ПП
User 22258774
ну он не робит
01:04:28 ПП
User 67164223
ну это он не робит
01:04:46 ПП
User 22258774
Знаешь когда он последний раз обновлялся?
01:05:03 ПП
User 22258774
Это в вебпаке не хотят принять пулл-реквест из одной строчки, чтобы он заработал
01:05:26 ПП
User 22258774
https://github.com/pugjs/pug-loader/issues/107
github.com/pugjs/pug-loader/issues/107
I am getting this error after upgrading to Webpack 4: Module build failed: TypeError: Cannot read property 'pugLoader' of undefined Is this something that's on the radar? :-)
01:17:35 ПП
01:26:50 ПП
User 67164223
мне как бы все равно на паг, я не юзаю его
02:17:32 ПП
User 377238783
Webpack 4 из коробки в режиме —mode production проводит минификацию и углификацию JS, а в Tree Shaking он умеет или все же нужно отдельный плагин ставить?
02:19:08 ПП
User 182613717
используется по умолчанию uglifyjs в прод режиме
02:49:14 ПП
User 355846509
User 377238783
Webpack 4 из коробки в режиме —mode production проводит минификацию и углификацию JS, а в Tree Shaking он умеет или все же нужно отдельный плагин ставить?
для него минификация = тришакинг
02:49:27 ПП
User 355846509
но для пушщей точности прогони через анализ
03:05:54 ПП
User 262606780
Подскажите, как настроить webpack 3 - задача вынести node_modules в vendor.js
Часть конфига:
…
const entry = {
    app: ['./index']
  };
…
new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor',
        minChunks: module => module.context && module.context.indexOf('node_modules') !== -1
})
…
После билда скрипты на странице не работают, хотя подгружаются нормально.
Если не использовать CommonsChunkPlugin все собирается и работает нормально
03:06:58 ПП
User 262606780
Ошибок в консоли нет
07:11:56 ПП
07:12:30 ПП
User 156780259
юзаю вот эту штуку, однако ожидания крайне не соответствуют реальности
07:12:31 ПП
User 156780259
https://github.com/FormidableLabs/webpack-dashboard
github.com/FormidableLabs/webpack-dashboard
A CLI dashboard for webpack dev server. Contribute to FormidableLabs/webpack-dashboard development by creating an account on GitHub.
07:12:38 ПП
User 156780259
вебпак 3.10.1
07:13:02 ПП
User 156780259
в чем может быть проблема?
07:13:52 ПП
User 67164223
может её настроить сначала надо?
07:14:15 ПП
User 156780259
да нет вроде, все что в доках указано я сделал
07:14:46 ПП
User 67164223
значит у тебя сам конфиг кривой
07:15:23 ПП
07:15:32 ПП
User 156780259
ну ладно
07:16:03 ПП
User 67164223
ща попробую себе поставить
07:16:10 ПП
User 67164223
интересно, запустить с вебпаком 4
07:16:49 ПП
User 156780259
там висит в ишью уже
07:16:57 ПП
User 156780259
так что не работает скорей всего
07:17:09 ПП
User 67164223
ну тогда поставлю на 4 версию
07:22:26 ПП
User 67164223
]0;webpack-dashboard  [1;1H [H [J
07:22:32 ПП
User 67164223
у меня вообще такую херню пишет
07:23:04 ПП
User 67164223
User 156780259
так что не работает скорей всего
как там правильно запускать надо?
07:23:49 ПП
User 156780259
webpack-dashboard -- some command
07:24:13 ПП
User 67164223
чот хз, у меня на винде не работает
07:26:41 ПП
User 67164223
ну нах, херня какая-то
07:27:22 ПП
User 156780259
)) тоже так подумал
07:27:39 ПП
User 156780259
но выглядит красивее намного чем оригинальный вывод вебпаковский
07:27:50 ПП
User 156780259
херово он прямо скажем выглядит
07:28:01 ПП
User 55943427
есть же еще сторонняя приложуха для нее
07:28:10 ПП
07:31:02 ПП
User 55943427
https://github.com/FormidableLabs/electron-webpack-dashboard
github.com/FormidableLabs/electron-webpack-dashboard
Electron Desktop GUI for Webpack Dashboard. Contribute to FormidableLabs/electron-webpack-dashboard development by creating an account on GitHub.
07:31:58 ПП
User 55943427
неправильно выразилась. Не сторонняя. Десктопная
07:35:12 ПП
User 156780259
круто! надо поковырять, спасибо за ссыль
07:47:14 ПП
07:47:15 ПП
User 156780259
пашет, в отличии от консоли
09:55:32 ПП
User 67164223
https://github.com/Popugune/WRRench/tree/webpack4

Дайте каких-нибудь советов годных

(ну и звезду ебанитесь, если не жалко и будете юзать конфиг)
github.com/Popugune/WRRench/tree/webpack4
🔧 WRRench