rein
@redeyes2015
Fri, Jul 20, 2018 6:34 AM
2
webpack 4 紀錄 (努力中)
rein
@redeyes2015
Fri, Jul 20, 2018 6:36 AM
Fri, Jul 20, 2018 6:58 AM
Document webpack 4 support · Issue #620 · babel/babe...
要換成 babel-loader 8.x & babel 7.x ... 這個組合還在 beta
... 但是硬著頭皮用還是會動??
rein
@redeyes2015
Fri, Jul 20, 2018 6:44 AM
Fri, Jul 20, 2018 6:45 AM
webpack/webpack-dev-server
webpack-dev-server 變維護模式了，v3.1.4 是可以用，但文件推薦用 webpack-serve 設定應該不相容...?
rein
@redeyes2015
Fri, Jul 20, 2018 6:51 AM
Can't add a JavaScript or CSS asset to the HTML ...
Webpack 4 not including asset · Issue #30 · jharris4...
html-webpack-plugin 會動了，但是 include asset plugin 還有問題 ...
rein
@redeyes2015
Fri, Jul 20, 2018 8:03 AM
喔，我錯了 babel-loader 7.1.3 就支援 webpack 4 了
rein
@redeyes2015
Fri, Jul 20, 2018 9:12 AM
🐛 Fail to inject code-splitting script files when we...
html-webpack-plugin 處理 splitChunks 有問題... 雖然換到 next 可以解決...
rein
@redeyes2015
Tue, Jul 24, 2018 5:12 AM
但是 asset-inject-html-webpack-plugin 不會動了，現在是直接寫進 template 裡去 work-around :Q
rein
@redeyes2015
Wed, Jul 25, 2018 2:09 AM
對了 splitChunks 非常有用, 直接處理了之前在 CommonsChunk 遇到的 問題，在多個 entry 中間切的時候可以處理 common~a~b~c / common~a~c 的 chunk，(好像) 不會遇到 entry module 掉在哪裡這種問題
rein
@redeyes2015
Thu, Jul 26, 2018 6:18 AM
Thu, Jul 26, 2018 9:29 AM
看產生出來的檔案大小發現不太對勁， webpack 4 的結果竟然比 3 還大，追了半天才發現，因為有 5 個 entry ( ... )，splitChunks 會檢查 splitChunks.maxInitialRequests，一個 entry 包含的 chunk 不能大過這個設定，於是有些 split chunk 會被放棄，shared module 保留在 entry chunk 內，但因為「先產生哪個 split chunk 」的邏輯，有可能反而讓像 vue 之類的大 module 被留在 entry chunk o_O
總之把 maxInitialRequests 調大一點可以避免這個問題，只是會有一個 entry 包含多達 7 個 chunk 的狀況 ...
rein
@redeyes2015
Thu, Aug 2, 2018 10:33 AM
卡在一件事情上 ... splitChunks + mini-css-extract-plugin 沒法得到預期的結果
所謂的預期是: entry-a 和 entry-b 都包含 c.css，我希望 c.css 被抽到 shared.css，但是試不出應該怎麼作
rein
@redeyes2015
Thu, Aug 2, 2018 10:33 AM
開了一個 repo: 作實驗紀錄:
redeyes2015/webpack-4-extract-shared-css-exp
rein
@redeyes2015
Thu, Aug 2, 2018 10:35 AM
目前 mini-css 的文件上的範例: "Extracting all CSS in a single file" 和 "Extracting CSS based on entry" 似乎都無法得到我想要的結果 ...
rein
@redeyes2015
Thu, Aug 2, 2018 10:36 AM
有點想要在
webpack-contrib/mini-css-extract-plugin
 開 issue ... 但感覺有很多人有類似又不太一樣的問題 orz
rein
@redeyes2015
Thu, Aug 2, 2018 10:37 AM
BTW, 看了以後才發現 splitChunks 的文件也不完整，例如沒有提到 test 的確切行為和 enforce 的行為
rein
@redeyes2015
Fri, Aug 3, 2018 2:51 AM
Chunk file for multi entry points with chunks: all ·...
找到一個跟我想作的事很接近的 issue report ..
但感覺 mini-css-extract-plugin 很需要一些關愛..
rein
@redeyes2015
Tue, Sep 11, 2018 9:16 AM
中間想了一個 work-around: 比較痛的是 foundation.css 這種巨大的 css，那就寫特例改用 file-loader 讓他們變成其他 asset... 但是失敗了，因為順序會錯掉
然後 style-loader 的 insertAt 選項對 style-loader/url 沒有作用
... 不過 style-loader 比較好改 (思)
rein
@redeyes2015
Tue, Sep 11, 2018 10:12 AM
硬改 style-loader/url 成功了 ... 但是 style-loader 好像正在準備 v1.0.0 ... 要寫 issue 嗎 (facepalm)
rein
@redeyes2015
Tue, Sep 11, 2018 10:26 AM
原來有人寫了 html-webpack-include-sibling-chunks-plugin ... 讓 html-webpack-plugin 在 webpack 4 底下可以正常運作! 這樣就不用等 html-webpack-plugin 4.0 正式 release 了 (然後我是不是要 revert 最前面那個修改 ...)
rein
@redeyes2015
Wed, Sep 12, 2018 1:58 AM
... WTF moment 出現了，重新看 "Extract all css in a single file" 的範例，發現跟我在實驗用 repo 的寫法不同: "test" 參數，之前我自己以為弄懂了 enforce 的影響，但其實沒有，改用範例的 test: /.css$/ 之後就會如預期把 shared.css 的內容拉成自己一個檔案了 ...
rein
@redeyes2015
Wed, Sep 12, 2018 1:59 AM
只有一個小缺陷是會有一個實質上沒作事的 "shared.js"
rein
@redeyes2015
Wed, Sep 12, 2018 2:00 AM
實在太蠢無法稱為 Eureka moment ...
rein
@redeyes2015
Wed, Sep 12, 2018 5:20 AM
關於 "多一個檔案" 基本上就是 這個 issue，原本說要等 webpack 5，後面說有機會在 webpack 4.x 有處理掉 ... 但還沒有更新，基本上 work-around 就是 :

> prepending those files' contents into you main entry manually.
rein
@redeyes2015
Wed, Sep 12, 2018 5:24 AM
btw ndb 超棒，真的讚
rein
@redeyes2015
Thu, Sep 13, 2018 1:40 AM
OK ... WTF moment 第二號，我在看 Extracting CSS based on entry 之後就一直用 function type 的 test ( test: (module) => ... ) 然後一直覺得這是我要的，但是看了 前面那個 issue 的範例 之後發現，不對，他沒有加 enforce
rein
@redeyes2015
Thu, Sep 13, 2018 1:41 AM
所以，其實一開始就用 test: /node_modules/ 大概就會對了，只是要調整 maxInitialRequests
rein
@redeyes2015
Thu, Sep 13, 2018 1:41 AM
Thu, Sep 13, 2018 1:41 AM
這一個月以來我想這些 work-around 究竟是 ...
rein
@redeyes2015
Thu, Sep 13, 2018 2:13 AM
可能是因為 mini-css-extracting 會把 module 的 resource 清掉，所以我寫 (module) => module.resource && /node_modules/.test(module.resource) 就抓不到了... 但直接給 regex 的效果不一樣 orz
rein
@redeyes2015
Thu, Sep 13, 2018 3:14 AM
也就是說庸人自擾 (敲頭)(敲頭)
rein
@redeyes2015
Thu, Sep 13, 2018 3:34 AM
webpack-contrib/webpack-command
webpack-command 被 deprecate 了... 本來還想抱怨他餵給 webpack.config.js export 的 function 的參數格式和 webpack-cli 不一樣的說... Oh well..
rein
@redeyes2015
Thu, Sep 13, 2018 4:04 AM
Thu, Sep 13, 2018 4:05 AM
uglify-es 不再 maintain ... 有人 fork，改名 "terser"，之後 uglifyjs-webpack-plugin 可以改用 terser，或是直接用 terser-webpack-plugin
最後 ... sokra 在 webpack 5 的 project 寫上 "Use terser or babili instead of uglify-es" hmm...
rein
@redeyes2015
Thu, Sep 13, 2018 5:55 AM
整理一下實際上要作的事... 其實不多嘛
(Plurk Paste)
rein
@redeyes2015
Thu, Sep 13, 2018 5:55 AM
plurk paste 不能編輯 ... 再說吧
rein
@redeyes2015
Thu, Sep 13, 2018 6:15 AM
Webpack 3 to 4
rein
@redeyes2015
Thu, Sep 13, 2018 6:17 AM
終於打通往vue-loader 15 的路了 !?
rein
@redeyes2015
Thu, Sep 20, 2018 10:25 AM
webpack-contrib/webpack-serve
... webpack-serve 也 deprecate 了
rein
@redeyes2015
Thu, Sep 20, 2018 10:40 AM
OK ... 好像有解釋些什麼
但我好不容易搬到 webpack-serve ... orz
webpack-dev-server 之前也不是很好整，可以期待 4.0 有所改善嗎
載入新的回覆