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

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

974 members

Архив канала @webpack_ru 9 апреля 2018 г.

05:56:29 ДП
User 212795634
Разные файлы, работают параллельно
05:56:49 ДП
User 212795634
Для последовательного лучше шелл скрипт
06:03:17 ДП
User 212795634
Если результат их не зависит друг от друга то да
06:03:54 ДП
User 212795634
Ну и может быть конфликт фс, если запись будет стримом в один и тот же файл
06:06:23 ДП
User 212795634
Когда нужно имена файлов выцепить и только потом второй запускать например, или dll reference
06:20:16 ДП
06:20:39 ДП
User 212795634
А какая задача то стоит?
06:29:44 ДП
User 212795634
https://github.com/faceyspacey/universal-demo/
вот здесь похожее что-то
github.com/faceyspacey/universal-demo
universal-demo - DEMO: Webpack Flush Chunks + React Universal Component 3.0 🚀
06:32:34 ДП
User 212795634
да, двойная компиляция, по моему и так понятно было
06:33:30 ДП
User 212795634
да норм все лол
06:36:01 ДП
User 261885262
Добрый день
06:37:03 ДП
User 261885262
Подскажите, пожалуйста, как сделать так, чтобы определенные файлы обрабатывались babel-loader (или любым другим лоадером), а потом копировались в build папку без включения в общий bundle?

 "webpack": "^4.3.0"
06:37:42 ДП
User 261885262
вот что-то типа такого (пример не работает)
06:37:52 ДП
07:08:08 ДП
User 67164223
User 261885262
тебе тут не нужен file-loader
07:08:38 ДП
User 67164223
User 261885262
Подскажите, пожалуйста, как сделать так, чтобы определенные файлы обрабатывались babel-loader (или любым другим лоадером), а потом копировались в build папку без включения в общий bundle?

 "webpack": "^4.3.0"
https://github.com/webpack-contrib/copy-webpack-plugin
github.com/webpack-contrib/copy-webpack-plugin
Copy files and directories with webpack. Contribute to webpack-contrib/copy-webpack-plugin development by creating an account on GitHub.
07:16:24 ДП
User 261885262
User 67164223
https://github.com/webpack-contrib/copy-webpack-plugin
github.com/webpack-contrib/copy-webpack-plugin
Copy files and directories with webpack. Contribute to webpack-contrib/copy-webpack-plugin development by creating an account on GitHub.
Использовал его. Фишка проблемы в том, чтобы перед копированием файл обрабатывался babel-loader-ом
07:16:59 ДП
User 67164223
User 261885262
Использовал его. Фишка проблемы в том, чтобы перед копированием файл обрабатывался babel-loader-ом
добавь в scripts webpack ... && babel ... out-dir
07:17:09 ДП
User 261885262
Как вариант, благодарю.
07:17:36 ДП
User 261885262
На самом деле, я уже решил проблему другим путем, но всеравно спасибо, вдруг подобное опять возникнет)
07:18:38 ДП
User 261885262
Если кому интересно, то проблема заключалась в использовании WebWorker-ов с электроном с интеграцией Nodejs API. И с использованием модуля webworker-promise

Итого решил с помощью worker-loader

import ChunksWorker from './chunks.worker'

const chunksWorker = new WebworkerPromise(new ChunksWorker())
07:49:31 ДП
User 67164223
Юзайть можно jss
07:49:36 ДП
User 67164223
styled components
07:49:43 ДП
User 67164223
там поддержка ssr нормальная
08:12:54 ДП
User 146658406
котаны, а можно научить chrome перезагружать source maps по изменениям в HMR ?
или вручную надо alt+r жать чтобы перезапустить devtools
08:15:31 ДП
User 146658406
https://github.com/facebook/create-react-app/issues/2407 - тут пишут что приземлилось в канарейке, но не уточняют в какой. В обычном 65-м хроме либо не пашет, либо что-то включить надо
github.com/facebook/create-react-app/issues/2407
We have not merged hot reloading support yet but I noticed a very unfortunate issue: Chrome doesn't update sourcemaps. See how the Hello in browser Sources pane doesn't change. Note that i...
08:32:23 ДП
User 146658406
devtool: env.dev ? 'cheap-inline-module-source-map' : 'source-map',
08:32:45 ДП
User 146658406
Пишут что с eval заработает, но нафиг такое счастье)
09:00:10 ДП
User 146658406
https://webpack.js.org/configuration/devtool/

devtool: eval
quality: generated code
09:07:21 ДП
User 146658406
для hmr.
09:07:50 ДП
User 146658406
сначала сделал reload на базе hmr. потом допилил до hmr.
09:10:40 ДП
User 146658406
Завел на базе webpack-dev-middleware, webpack-hot-middleware, webpackHotModuleReplacementPlugin и react-hot-loader .
09:11:12 ДП
User 146658406
Возможны варианты. Возможно у тебя не webpack-dev-middleware. А просто опция devServer в конфиге вебпака.
09:32:37 ДП
User 476392071
Привет!  Как сделать проверку на уникальность класса в css? Те, у меня есть класс .fix-a, и если я где-то ещё сделаю класс  .fix-a, система сделает мне предупреждение. Соответственно, проверка идёт только для классов у которых в начале идёт определённый префикс, в моём случае fix-
09:34:23 ДП
User 212795634
User 476392071
Привет!  Как сделать проверку на уникальность класса в css? Те, у меня есть класс .fix-a, и если я где-то ещё сделаю класс  .fix-a, система сделает мне предупреждение. Соответственно, проверка идёт только для классов у которых в начале идёт определённый префикс, в моём случае fix-
https://github.com/webpack-contrib/css-loader#modules
github.com/webpack-contrib/css-loader
CSS Loader. Contribute to webpack-contrib/css-loader development by creating an account on GitHub.
09:52:12 ДП
User 146658406
Э? webpackDevserver или экспресс мидлвара выдадут как статику готовый html с подключенной точкой входа, которая включает дерево компонент.

 А зачем тебе сырой js с отдельным компонентом ?
12:56:47 ПП
User 234568397
Всем привет, пытался сделать обертку для html-webpack-plugin, выглядела так:
const pugPages = names => names.forEach(name => new HtmlWebpackPlugin({
    filename: `../${name}.html`,
    template: `./src/templates/pages/${name}.pug`,
    inject: false
}));

// webpack 4
plugins: [
        new pugPages(['index', 'about']),
    ],

Webpack 4 не дал так сделать, указал на Plugins API.

С этими плагинами в Webpack 4 что-то сложнавато у меня.... сделал так:
import CleanWebpackPlugin from 'clean-webpack-plugin';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import {
    resolve
} from 'path';

class pugPages {
    constructor(options) {
        this.options = options;
    }

    apply(compiler) {
        compiler.hooks.compilation.tap('pugPages', () => {
            this.options.forEach(name => {
                new HtmlWebpackPlugin({
                    filename: `../${name}.html`,
                    template: `./src/templates/pages/${name}.pug`,
                    inject: false,
                });
            });
        });
    }
}

export default {
    entry: './src/js/index.js',
    output: {
        path: resolve(__dirname, 'build/js'),
        filename: 'bundle.js',
    },
    module: {
        rules: [{
                test: /\.js$/,
                exclude: /node_modules/,
                use: 'babel-loader',
            },
            {
                test: /\.pug$/,
                exclude: /node_modules/,
                use: 'pug-loader',
            },
        ],
    },
    mode: 'development',
    plugins: [
        new CleanWebpackPlugin('build'),
        new pugPages(['index', 'about']),
    ],
};

Не хочет работать,,, может кто-нибудь знает как правильно сделать плагин?
12:58:37 ПП
User 134905826
...pugPages(['index', 'about'])
12:59:39 ПП
User 234568397
User 134905826
...pugPages(['index', 'about'])
Я просто хотел передавать в него имена pug файлов....
12:59:56 ПП
User 234568397
чтобы не писать на каждую страницу new HtmlWebpackPlugin([.....})
01:00:15 ПП
User 234568397
new HtmlWebpackPlugin({
            filename: '../about.html',
            template: './src/templates/about.pug',
        }),
01:00:18 ПП
User 234568397
new HtmlWebpackPlugin({
            filename: '../index.html',
            template: './src/templates/index.pug',
        }),
01:00:23 ПП
User 234568397
чтобы так не было
01:00:37 ПП
User 234568397
но с плагинами не получается разобраться
01:00:46 ПП
User 134905826
User 234568397
Я просто хотел передавать в него имена pug файлов....
это не просто точки а решение. разаботчики html-webpack-plugin рекомендуют много инстнсов
01:01:09 ПП
User 234568397
зачем....
01:01:19 ПП
User 134905826
и forEach на map
01:01:41 ПП
User 234568397
мап....
01:01:45 ПП
01:02:40 ПП
User 234568397
попробую
01:03:09 ПП
User 234568397
    apply(compiler) {
        compiler.hooks.compilation.tap('pugPages', () => {
            this.options.map(name => {
                new HtmlWebpackPlugin({
                    filename: `../${name}.html`,
                    template: `./src/templates/pages/${name}.pug`,
                    inject: false,
                });
            });
        });
    }
01:03:14 ПП
User 234568397
это не работает
01:05:26 ПП
01:05:34 ПП
User 134905826
User 234568397
это не работает
тебе не нужен один свой плагин. а только много инстансов html-плагина
01:06:14 ПП
User 234568397
извини, инстансы - это наследники?
01:06:18 ПП
User 146658406
Я вообще SSR не занимаюсь) Речь была про рендер в памяти у webpack-dev-server и выдачей уже завернутого в html билда из памяти в браузер) Ваш вопрос звучал так что вы вместо билда хотели у этого webpack-dev-server запросить отдельно взятый компонент. Вот и удивился.

Запросить можно либо билд, либо чанк.
01:07:59 ПП
User 234568397
User 134905826
тебе не нужен один свой плагин. а только много инстансов html-плагина
new HtmlWebpackPlugin({
            filename: '../index.html',
            template: './src/templates/index.pug',
        }),

Много вот этих?
01:08:27 ПП
User 234568397
Или мне нужно наследоваться от него?
01:22:58 ПП
User 332814900
Ребятки, webpack 4 кто то пробовал?
01:24:06 ПП
User 332814900
При билде через раз просиходит конкатенация как css так и js
01:24:08 ПП
User 332814900
В чём беда?
01:24:11 ПП
User 332814900
webpack 4.5
01:33:21 ПП
User 332814900
И что ещё можно использовать для увеличения сжатия файлов
03:33:09 ПП
User 35438768
Товарищи, привет. Уже писал здесь. Подкиньте идею, на что нужно давать права, чтобы был доступ к файловой системе, при деплое на одной тачке все проходит, а на другой  не пишется?
03:46:14 ПП
User 35438768
Никто не знает кому нужно давать права?
04:23:40 ПП
User 66779439
User 35438768
Товарищи, привет. Уже писал здесь. Подкиньте идею, на что нужно давать права, чтобы был доступ к файловой системе, при деплое на одной тачке все проходит, а на другой  не пишется?
права на запись нужны, хрен знает что у тебя за OS
04:40:57 ПП
User 122087672
User 35438768
Никто не знает кому нужно давать права?
форму номер три из ЖЭКа подавал?
04:41:45 ПП
User 122087672
лог с ошибкой было бы полезно увидеть
04:46:17 ПП
User 35438768
User 66779439
права на запись нужны, хрен знает что у тебя за OS
Windows, извиняюсь
04:47:21 ПП
User 35438768
А в консоли ошибки нет
04:48:24 ПП
User 66779439
User 35438768
Windows, извиняюсь
Windows Server ?
05:00:23 ПП
User 35438768
User 66779439
Windows Server ?
Да
05:10:07 ПП
User 476392071
Привет! А можно как-то в вебпаке в ларавеле сделать так, что бы он в ресурсах сам автоматически искал scss файлы в определённой папке и компелировал их в определённую папку в публике?
05:14:32 ПП
05:15:08 ПП
User 476392071
User 212795634
Нет
Вообще нет вариантов? =\\
05:16:09 ПП
User 212795634
User 476392071
Вообще нет вариантов? =\\
Только в entry указать
05:29:05 ПП
User 332814900
Я сомневаюсь что нельзя
05:30:24 ПП
User 332814900
mix.sass('resources/assets/sass/app.sass', 'public/css')
   .sass('resources/assets/sass/admin.sass', 'public/css/admin');Вы только так можете указывать?
05:31:26 ПП
User 332814900
User 476392071
Вообще нет вариантов? =\\
ты можешь импортнуть все свои sass файлы в один и вызвать компиляцию только для этого файла
05:31:58 ПП
User 332814900
main.sass
@import "./mixins/_media"
@import "./mixins/_keyframes"
@import "./_grid"
@import "./_fonts"

@import "./_dinfy"
@import "./_app"

@import "./pages/_offers"
@import "./pages/_streams"
@import "./pages/_dashboard"
@import "./pages/_leads"

@import "./_responsive"
05:32:22 ПП
User 476392071
User 332814900
ты можешь импортнуть все свои sass файлы в один и вызвать компиляцию только для этого файла
Я хотел сделать для компонентов, которые не используются на всех страницах отдельные файлы стилей
05:33:36 ПП
User 332814900
Напиши скриптик небольшой, который будет искать все стили по директории и собирать пути в массив, затем пройдись циклом по массиву внутри которого вызывай компиляцию
05:33:37 ПП
User 332814900
профит
05:33:57 ПП
User 332814900
fs тебе в помощь
05:34:21 ПП
User 332814900
https://stackoverflow.com/questions/25460574/find-files-by-extension-html-under-a-folder-in-nodejs
stackoverflow.com/questions/25460574/find-files-by-extension-html-under-a-folder-in-nodejs
I'd like to find all *.html files in src folder and all its sub folders using nodejs. What is the best way to do it? var folder = '/project1/src'; var extension = 'html'; var cb = function(err, r...
05:38:34 ПП
User 212795634
User 332814900
Напиши скриптик небольшой, который будет искать все стили по директории и собирать пути в массив, затем пройдись циклом по массиву внутри которого вызывай компиляцию
Вжух, вы изобрели гульп
05:48:11 ПП
User 332814900
гульп слишком глупый
05:48:11 ПП
User 332814900
Вжух, вы изобрели гульп
05:56:42 ПП
User 32530886
User 332814900
Вжух, вы изобрели гульп
На сообщения отвечать можно. Пересылать их не надо
05:57:11 ПП
User 32530886
User 332814900
гульп слишком глупый
Он не глупый. А то что ты описал в сообщении выше, как раз задача галпа
05:57:19 ПП
User 32530886
User 332814900
Напиши скриптик небольшой, который будет искать все стили по директории и собирать пути в массив, затем пройдись циклом по массиву внутри которого вызывай компиляцию
Вот это
06:30:39 ПП
User 332814900
Галп отлично справляется со своими функциями, однако он простой.
06:30:39 ПП
User 332814900
Вот это
06:55:35 ПП
User 66779439
кто писал плагины под webpack ?
я форкнул проект один, там юзается falafel для парсинга в AST
но он как видимо заброшен ибо не работает под ebpack 3
есть какие-то аналоги с удобным API и потом это в строку все преобразовать
07:22:33 ПП
User 212795634
entry: {
  first: [],
  second: [],
}
07:22:37 ПП
User 212795634
и так сколько угодно
07:25:05 ПП
User 212795634
так она в массиве будет
07:25:10 ПП
User 212795634
конечно да