@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 г.

07:09:56 ДП
User 210722170
ребят, помогите понять проблему, собрал небольшой конфиг, все работает, все работает за исключением js.
в общем сборка под вордпресс, исолюзую browser-sync для вотча.

в параметрах вотча я указал все файлы в теме wordpress, и это работает, но через раз, php, scss хорошо обновляются без перезагрузки, а js файлы только если обновляется scss файл...посмотрите небольшой конфиг, подскажите где беда...

https://jsfiddle.net/vbdL8bj6/
jsfiddle.net/vbdL8bj6
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
07:13:20 ДП
User 212795634
User 210722170
ребят, помогите понять проблему, собрал небольшой конфиг, все работает, все работает за исключением js.
в общем сборка под вордпресс, исолюзую browser-sync для вотча.

в параметрах вотча я указал все файлы в теме wordpress, и это работает, но через раз, php, scss хорошо обновляются без перезагрузки, а js файлы только если обновляется scss файл...посмотрите небольшой конфиг, подскажите где беда...

https://jsfiddle.net/vbdL8bj6/
jsfiddle.net/vbdL8bj6
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
чому у тебя в 1 entry 2 файла? не пробовал разнести?
07:14:06 ДП
User 212795634
например 
app: [],
style: [],
07:14:22 ДП
User 210722170
User 212795634
чому у тебя в 1 entry 2 файла? не пробовал разнести?
так это же тоже самое что и импорт в js файл, тем более в boilerplates сейчас часто так делают
07:15:38 ДП
User 210722170
в общем делаю манипуляции с параметром вотча 'files' и по разному все работает, я просто не могу понять как правильно настроить
07:15:48 ДП
User 210722170
косяк где-то есть но я не могу разобраться
07:16:03 ДП
User 212795634
watchContentBase мб
07:16:10 ДП
User 210722170
ни как не могу уже понять этот hot reload, устал уже очень((((
07:16:33 ДП
User 210722170
User 212795634
watchContentBase мб
это куда?
07:16:44 ДП
User 212795634
User 210722170
это куда?
девсервер
07:18:05 ДП
User 210722170
User 212795634
девсервер
смотрю доки и тут нет такого параметра https://github.com/webpack/webpack-dev-middleware
github.com/webpack/webpack-dev-middleware
webpack-dev-middleware - A development middleware for webpack
07:18:36 ДП
User 210722170
а есть тут кто, кто реал соображает и может сразу косяк найти? а то я пишу уже сюда второй раз и ни кто не понимает(((
07:18:53 ДП
User 210722170
вроде 541 участник
07:18:57 ДП
User 212795634
а блин)
07:19:05 ДП
User 212795634
это у сервера было а не мидлвары
07:19:27 ДП
User 212795634
на крайняк chokidar есть и вручную релоадить по его ивентам
07:20:04 ДП
User 210722170
а есть у кого конфиг уже рабочий, похожий для этих задачь, чтобы я в нем разобрался?
07:20:25 ДП
User 212795634
не думаю что здесь много кто под вп пишет)
07:20:36 ДП
User 212795634
основная масса - фронт фреймворки
07:21:31 ДП
User 210722170
ну не ужели ни кто под bs не работает?
07:21:38 ДП
User 210722170
и не пользуется в нем горячей заменой?
07:21:43 ДП
User 210722170
не верю
07:22:16 ДП
User 210722170
я просто хз уже куда копать, я так заебался
07:31:28 ДП
User 114198470
User 210722170
я просто хз уже куда копать, я так заебался
а watch true, не надо?)
07:32:18 ДП
User 210722170
User 114198470
а watch true, не надо?)
в package.json - "dev": "webpack —watch"
07:32:23 ДП
07:32:44 ДП
User 212795634
User 210722170
в package.json - "dev": "webpack —watch"
у тебя разве не через ноду запускается?
07:33:07 ДП
User 210722170
блин, уже курочу конфиг, и стили перестали работать, блин, вот жесть как сложно, мой мозг просто устал от этого
07:33:20 ДП
User 210722170
уже наверное недели 2 борюсь
07:33:26 ДП
User 210722170
(((((((((((((((((((
07:34:06 ДП
User 210722170
User 212795634
у тебя разве не через ноду запускается?
ну да, через скрпиты в package.json
07:34:15 ДП
User 210722170
вот он
{
  "scripts": {
    "build": "webpack",
    "dev": "webpack —watch"
  },
  "name": "frontend",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1",
    "babel-register": "^6.26.0",
    "browser-sync": "^2.23.6",
    "browser-sync-dev-hot-webpack-plugin": "^0.2.0",
    "bs-html-injector": "^3.0.3",
    "css-loader": "^0.28.9",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.6",
    "node-sass": "^4.7.2",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.20.1",
    "url-loader": "^0.6.2",
    "webpack": "^3.10.0",
    "webpack-dev-middleware": "^2.0.4",
    "webpack-hot-middleware": "^2.21.0"
  }
}
07:34:30 ДП
User 212795634
User 210722170
ну да, через скрпиты в package.json
так мидлвар надо к експрессу цеплять
07:34:30 ДП
User 210722170
тоже не боьшой
07:34:43 ДП
User 212795634
у тебя есть?
07:34:50 ДП
07:35:25 ДП
User 210722170
User 212795634
у тебя есть?
нет. я просто смотрел в boilerplates разных без экспресса все делается
07:35:40 ДП
User 210722170
та же тема sage от рутс
07:36:17 ДП
User 212795634
User 210722170
нет. я просто смотрел в boilerplates разных без экспресса все делается
webpack-dev-middleware это для экспресса
07:36:29 ДП
User 212795634
если без него то devserver есть
07:36:34 ДП
User 212795634
который обертка над ней
07:37:05 ДП
User 210722170
этот плагин позволяет без экспресса обойтись - "browser-sync-dev-hot-webpack-plugin": "^0.2.0",
07:37:09 ДП
User 210722170
он не нужен там просто
07:37:16 ДП
07:37:21 ДП
User 212795634
ну тогда хз дажеэ
07:37:31 ДП
User 210722170
я уверен что косяк в конфиге, или чего-то не хватает, но точно не экспресса
07:44:16 ДП
07:44:18 ДП
User 210722170
вот рабочий конфиг:
import path from 'path';
import webpack from 'webpack';
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import BrowserSyncHotPlugin from 'browser-sync-dev-hot-webpack-plugin';

const publicPath = 'http://localhost:3000/themes/awesome/'

let webpackConfig = {

  entry: {
    app: [
      "webpack/hot/dev-server", "webpack-hot-middleware/client",
      './js/app.js',
      './sass/app.scss'
    ]
  },

  output: {
    filename: 'js/[name].js',
    path: path.join(__dirname, '../assets'),
    publicPath
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.join(__dirname, 'js'),
        loader: 'babel-loader'
      },
      {
        test: /\.scss$/,
        include: path.join(__dirname, 'sass'),
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'sass-loader']
        })
      }
    ]
  },

  plugins: [
    new ExtractTextPlugin({
      filename: 'css/app.css',
      disable: true
    }),
    new webpack.HotModuleReplacementPlugin(),
    new BrowserSyncHotPlugin({
      browserSync: {
        port: 3000,
        open: false,
        reloadDelay: 500,
        proxy: {
          target: 'http://test.loc/'
        },
        plugins: [
          {
            module: "bs-html-injector",
            options: {
              files: [
                '..//*.php',
                // './sass//*.scss'
              ]
            }
          }
        ]
      },
      devMiddleware: {
        publicPath,
        stats: { colors: true, chunck: false },
        hot: true
      },
      hotMiddleware: {}
    }),
  ]

};

export default webpackConfig;

но js не обновляется ни как, я знаю что он не будет обновляться без перезагрузки, но он даже не перезагружает..
вот скрин консоли, клгда js пытается обновить, в желтом бекграунде инфа
07:45:01 ДП
User 114198470
короче рецепты посмотри лучше и без плагина сделай
07:45:17 ДП
User 114198470
какой то ноунейм плугин)
07:46:59 ДП
User 210722170
User 114198470
какой то ноунейм плугин)
этот плагин используется тут https://github.com/retyui/prestashop-1.7-webpack-3-hot-module-replacement
github.com/retyui/prestashop-1.7-webpack-3-hot-module-replacement
prestashop-1.7-webpack-3-hot-module-replacement - Prestashop theme. Webpack 3 migration and hot module replacement
07:48:24 ДП
User 114198470
User 210722170
этот плагин используется тут https://github.com/retyui/prestashop-1.7-webpack-3-hot-module-replacement
github.com/retyui/prestashop-1.7-webpack-3-hot-module-replacement
prestashop-1.7-webpack-3-hot-module-replacement - Prestashop theme. Webpack 3 migration and hot module replacement
ну тогда рой проблему) потом расскажи чем закончилось:D
07:49:53 ДП
User 210722170
User 114198470
короче рецепты посмотри лучше и без плагина сделай
мне нужен вебпак и броузер синк, в рецептах я нашел только webpack + babel и webpack + monkey-hot-loader

и еще, странный синтаксис для меня, подключать кофик вебпака в миддлвары.. да и обновлялись репозитории давно, я говорю к примеру про это https://github.com/Browsersync/recipes/tree/master/recipes/webpack.babel
github.com/BrowserSync/recipes/tree/master/recipes/webpack.babel
recipes - Fully working project examples showing how to use BrowserSync in various ways.
07:50:20 ДП
User 210722170
User 114198470
ну тогда рой проблему) потом расскажи чем закончилось:D
я так магилу себе походу быстрее вырою
07:51:25 ДП
User 114198470
User 210722170
я так магилу себе походу быстрее вырою
ну вот по одному из рецептов сделай)
07:51:51 ДП
User 210722170
User 114198470
ну вот по одному из рецептов сделай)
я не хочу по ним делать, они старые
07:52:14 ДП
User 210722170
User 114198470
ну вот по одному из рецептов сделай)
у меня есть вопрос
07:52:19 ДП
User 210722170
User 114198470
ну вот по одному из рецептов сделай)
лично вам
07:52:36 ДП
User 114198470
User 210722170
я не хочу по ним делать, они старые
ну я через галп + bs + webpack сделал) хотя я совсем не спец в этом
07:53:08 ДП
User 210722170
User 114198470
ну я через галп + bs + webpack сделал) хотя я совсем не спец в этом
от гальпа отказываюсь
07:54:20 ДП
User 114198470
User 210722170
от гальпа отказываюсь
суть не в галпе, а то что я не настраивал bs через плагин
07:54:46 ДП
User 210722170
User 114198470
ну я через галп + bs + webpack сделал) хотя я совсем не спец в этом
вот смотрите, в теме sage исполькуют трюк с поключением hot-middleware в entry:
сначала создается экзепляр, вешается на метот subscribe слушатель и дальше это передается в entry.
вот этот кусочек кода https://github.com/roots/sage/blob/master/resources/assets/build/helpers/hmr-client.js
github.com/roots/sage/blob/master/resources/assets/build/helpers/hmr-client.js
sage - WordPress starter theme with a modern development workflow
07:55:26 ДП
User 210722170
User 114198470
суть не в галпе, а то что я не настраивал bs через плагин
вопрос то какой, откуда тот кто писал, взял метот subscribe у hot-middleware? я доку обшарил, нет такого
07:56:27 ДП
User 210722170
User 114198470
суть не в галпе, а то что я не настраивал bs через плагин
потом добавляет этот миддлвар в ентри https://github.com/roots/sage/blob/master/resources/assets/build/util/addHotMiddleware.js
github.com/roots/sage/blob/master/resources/assets/build/util/addHotMiddleware.js
sage - WordPress starter theme with a modern development workflow
07:59:17 ДП
User 210722170
User 114198470
суть не в галпе, а то что я не настраивал bs через плагин
вы где?)
07:59:58 ДП
User 114198470
User 210722170
вы где?)
тута, я тоже не знаю)) пробую найти
08:00:13 ДП
User 210722170
User 114198470
тута, я тоже не знаю)) пробую найти
ахах)
08:00:25 ДП
User 210722170
User 114198470
тута, я тоже не знаю)) пробую найти
я же про то же)
08:01:33 ДП
User 114198470
User 210722170
ахах)
поэтому я не люблю трюки)
08:01:55 ДП
User 114198470
User 210722170
я же про то же)
лучше делать по старому рабочее, чем трюки изучать
08:47:24 ДП
User 210722170
а че не вариант вместо bs использовать webpack-dev-server для wordpress?
08:51:30 ДП
User 125282066
Добрый день! Скажите пожалуйста, кто-нибудь мутил связку tomcat + webpack?
09:32:43 ДП
User 317866423
гайз, приветы.
Подскажите, как получить в js файлике, который билдит вебпак название файлов, сгенерированное HtmlWebpackPlugin плагином?
А именно - [hash]  в этих файликах?
Заранее благодарен.
09:33:00 ДП
User 212795634
User 317866423
гайз, приветы.
Подскажите, как получить в js файлике, который билдит вебпак название файлов, сгенерированное HtmlWebpackPlugin плагином?
А именно - [hash]  в этих файликах?
Заранее благодарен.
не наоборот?))
09:33:49 ДП
User 317866423
User 212795634
не наоборот?))
нене, всё именно так. Я service worker хочу запилить. И там именно хеши нужны, чтобы кешировал, что нужно. Но без понятия как их получить
09:34:41 ДП
User 317866423
ну просто в html он вставляет. Там есть htmlWebpackPlugin.files.chunks
а блин в js - нет)
09:35:25 ДП
User 212795634
HtmlWebpackIncludeAssetsPlugin
09:35:26 ДП
User 212795634
попробуй
09:38:14 ДП
User 317866423
так, а к чему обращаться в жс файликах?
09:38:35 ДП
User 317866423
http://take.ms/7S6sF
судя по экзамплу он сделан для включения файликов в html темплейты
monosnap.com/file/tXko1F1ZPV08nrwlfNK9K3GIVQ47Rh
Monosnap — the best tool to take & share your screenshots..
09:39:05 ДП
User 317866423
я и так подрубаю в темплейты через чанки в htmlwebpackplugin
09:39:17 ДП
User 317866423
мне бы какой-то объект, который это ещё в жс всунет
09:40:13 ДП
User 317866423
была конечно идея создать в темплейте глобальный объект в виндоу и в него сложить массив файликов. Но их же блин потом как-то передать в серсис воркер нужно до события инит... А это как-то совсем не реально))
09:40:15 ДП
09:40:23 ДП
User 212795634
есть assets-webpack-plugin
09:40:27 ДП
User 212795634
он генерит жсон
09:42:28 ДП
User 134905826
User 317866423
нене, всё именно так. Я service worker хочу запилить. И там именно хеши нужны, чтобы кешировал, что нужно. Но без понятия как их получить
sw-precache-webpack-plugin -- все умеет из коробки
09:45:58 ДП
User 317866423
User 134905826
sw-precache-webpack-plugin -- все умеет из коробки
а как в нём пуши слушать?
Не могу найти в описании
там есть событие push в sw просто
09:47:31 ДП
User 134905826
User 317866423
а как в нём пуши слушать?
Не могу найти в описании
там есть событие push в sw просто
пуши не знаю, не использовал. насколько я знаю он заточен на оффлайн кеш и не более. Но предположительно, там есть возможность сделать шаблон файла sw.js -- вероятно можно допилить.
09:49:04 ДП
User 134905826
https://github.com/GoogleChromeLabs/sw-precache/blob/master/service-worker.tmpl
github.com/GoogleChromeLabs/sw-precache/blob/master/service-worker.tmpl
sw-precache - A node module to generate service worker code that will precache specific resources so they work offline.
09:51:15 ДП
User 317866423
ну это совсем другая либина. А в той не вижу конфига, чтобы темплейт всовывать.
Может есть какой-то более простой вариант?
Мне просто имена жс файлов в жс всунуть нужно))
09:52:45 ДП
User 134905826
User 317866423
ну это совсем другая либина. А в той не вижу конфига, чтобы темплейт всовывать.
Может есть какой-то более простой вариант?
Мне просто имена жс файлов в жс всунуть нужно))
я бы написал кастомный webpack-plugin: на событие done делаем glob('dist/**/*.html') и сам считал хеши.
09:53:44 ДП
User 317866423
User 134905826
я бы написал кастомный webpack-plugin: на событие done делаем glob('dist/**/*.html') и сам считал хеши.
понял, сча поучимся писать плагины)
Спасибо)
09:53:55 ДП
User 317866423
я так понимаю либина будет вполне актуальна, если её в нпм всунуть?))
09:55:04 ДП
User 134905826
User 317866423
я так понимаю либина будет вполне актуальна, если её в нпм всунуть?))
не понимаю вопроса
07:10:01 ПП
User 177916640
https://github.com/ruanyf/webpack-demos

Полезности,!!! пацаны налетай!!
github.com/ruanyf/webpack-demos
webpack-demos - a collection of simple demos of Webpack
07:53:25 ПП
User 227974324
В большинстве этих полезностей отсутствует Docker
07:53:37 ПП
User 227974324
https://github.com/Subb98/Hello-webpack/ - вот пример, если кому надо, вдруг.
github.com/Subb98/Hello-webpack
Webpack HW app, wrapped with Docker Compose. Contribute to Subb98/Hello-webpack development by creating an account on GitHub.
09:02:05 ПП
User 416775837
Решил настроисть связку TS + VUE  + HMR через middleware на koa. В итоге получаю в консоле 

The following modules could not be updated
09:02:23 ПП
User 416775837
Кто-то настривал уже такую связку?
09:03:08 ПП
User 212795634
User 416775837
Кто-то настривал уже такую связку?
module.hot.accept гугли
09:18:13 ПП
User 188151488
Помогите настроить вебпак, чтобы он стрелочные функции в обычные переводил
09:18:26 ПП
09:18:43 ПП
User 188151488
Стоит итак
09:18:56 ПП
User 212795634
значит неправильно настроен
09:19:00 ПП
User 212795634
кидай конфиг
09:19:02 ПП
User 188151488
http://prntscr.com/ick3tj
prnt.sc/ick3tj
Captured with Lightshot
09:20:04 ПП
User 212795634
поставь preset-env
09:34:59 ПП
User 188151488
http://prntscr.com/ickc1l
prnt.sc/ickc1l
Captured with Lightshot
09:35:19 ПП
User 212795634
User 188151488
http://prntscr.com/ickc1l
prnt.sc/ickc1l
Captured with Lightshot
в опции browserslist добавь
09:35:23 ПП
09:40:36 ПП
User 188151488
http://prntscr.com/ickeww
prnt.sc/ickeww
Captured with Lightshot
09:47:44 ПП
User 212795634
User 188151488
http://prntscr.com/ickeww
prnt.sc/ickeww
Captured with Lightshot
ээ ну мб ие9)
09:54:05 ПП
User 188151488
даже 7 не помогает)
09:57:12 ПП
User 188151488
Там он часть кода преобразовывает, а часть нет
09:57:39 ПП
User 32530886
можно просто не юзать env
09:59:01 ПП
User 212795634
User 32530886
можно просто не юзать env
ес2015 тож не работает
09:59:17 ПП
User 212795634
возможно там нод модули в ес6
09:59:21 ПП
User 32530886
так пофигу же
09:59:24 ПП
09:59:27 ПП
User 32530886
понял
09:59:41 ПП
User 32530886
User 212795634
возможно там нод модули в ес6
скорее всего, да
10:03:08 ПП
User 188151488
User 212795634
возможно там нод модули в ес6
Не понял, это как? Они же в ексклюдид
10:03:28 ПП
User 212795634
User 188151488
Не понял, это как? Они же в ексклюдид
поэтому и не процессится
10:04:15 ПП
User 212795634
я вендорный бандл делаю и его транспилю
10:04:17 ПП
User 188151488
Ну да логично)
10:05:40 ПП
User 188151488
Можно кфг? В деве так можно делать?
10:06:12 ПП
User 212795634
User 188151488
Можно кфг? В деве так можно делать?
https://webpack.js.org/plugins/dll-plugin/
10:06:17 ПП
User 212795634
отдельный конфиг