[B! webpack] takutakumaのブックマーク

俺の webpack.config.js-20200503 - mizchi's blog

基本思想とにかく薄く。必要なものだけ。基本は ts-loader を transpileOnly: true で使うだけ。最悪これだけでいい。型チェックはIDEか yarn tsc -p . --noEm it でやる。 CRA や parcel は使わない。暗黙な振る舞いが多すぎるので。一切勉強したくない人はいれていいと思うが、その場合 eject しない、dist ディレクトリをそのまま使うこと前提。 style-loader/css-loader は外部CSSを読むときに設定する worker-plugin はなくてもいいけど、 worker もビルドしたいことが多いので、入れていることが多い html-webpack-plugin と webpack-dev-server 組み合わせると、他と組み合わせずに完結して動く。このHTMLを本番で使わずとも、デバッグで使ってることが多いの

takutakuma 2020/05/03

リンク

webpackの仕組みを簡潔に説明する - hiroppy's site

この記事は、Node.js Advent Calendar 2018の 18 日目の記事です。遅れてしまい本当に申し訳ありません。この記事は、HTML5 カンファレンスで話した内容が中心となります。 Node.js とはかけ離れていますが、自分が書きたかった内容だったので、理解してくださると嬉しいです。モジュール webpack は以下のモジュールをサポートします。 // ESM (ECMAScript Modules) import foo from "./foo"; export default foo; import("./foo.wasm"); // native support for WebAssembly import("./foo.json"); // native support for JSON // CJS (CommonJS Modules) const fo

takutakuma 2018/12/26

webpack

リンク

webpackのbundle後のJavaScriptのサイズを減らしている話 | リクルートテクノロジーズ　メンバーズブログ

はじめにリクルートテクノロジーズに4月に新卒入社した辻健人です．GitHubではmaxmellonで活動しています． 7月より，やりとりも作成もラクになるシフト管理サービス「Airシフト」のエンハンス開発を担当しています．以前は，React製SPAのパフォーマンスチューニング実例という内容で記事を書きました．今回は同じSPAにおいて，いかにwebpackが生成するJavaScriptのバンドルサイズを減らすかについて紹介していきます． webpackが，そもそも何のためのツールか，バンドルする理由などについては割愛させていただきます．そういった話は，こちらの記事 (Webpack の考え方について – mizchi’s blog) がわかりやすいと思います． Airシフトのアーキテクチャ Airシフトは，React-Reduxで開発されており，かつSSRを行っておりコードの大

takutakuma 2018/12/15

リンク

Webpack の考え方について - mizchi's blog

なぜ初心者は webpackが解らないのか？- Why can’t you understand the webpack? - from 健人井関 www.slideshare.net この記事バズってたけど、わからない人がよりわからなくなる、という点で問題だと思っていて、webpack の目的の本質的な部分から整理する必要があると思います。 (あと友人が webpack に挑戦していたので入門資料も兼ねてる) Webpack の本質的な部分は次の3つです。それ以外は全部おまけ機能だと思ってよいです。 ES Modules のエミュレート node_modules のリンカ拡張子ごとの変形 Webpack が本当にやりたいことこういうコードがあるとします。 // src/a.js export default () => console.log('hello'); // src/in

takutakuma 2018/11/26

リンク

https://engineering.mercari.com/entry/2017/12/19/workbox

takutakuma 2018/11/24

リンク

Cloudflare Workers を使って prerendering した App Shell を返してみる - スタディサプリ Product Team Blog

こんにちは。最近は主に frontend を書いている @banyan です。現在私達のチームではスタディサプリの Web の生徒アプリケーションをリニューアルしています。この夏に合格特訓コースというプランに絞ってベータ版という形でリリースして、これから段階的に全面リニューアルに向けて開発を進めていきます。技術スタックとしては React + Redux + TypeScript + Workbox (Service Worker) です。 SSR に関しては、SNS での流入がないことや、ページが基本的に生徒のデータを扱いキャッシュしにくいサイトのため、採用しませんでした。またこの記事も参考にさせて頂き、 Does your app require a sign-in to view most content (e.g. GMail)? If so, you don’t need

takutakuma 2018/11/21

リンク

Reactをv16にアップグレードしたらuglifyjsの秘孔をついてハマった件 - Islands in the byte stream

追記: Terser v3.10.11 でこの問題が修正されていることを確認しました。現在は collapse_vars: false というワークアラウンドは不要になりました。 webpackのproduction buildの話です。 Reactが悪いわけではないんですが、たまたま秘孔をつくコードがReactないし関連するReact v16に依存するライブラリにあったんでしょうね。 Reactをv16にアップグレードしたら webpack で production build ができなくなった pluginを着脱しながら調べた結果、 uglifyjs がクラッシュしていることがわかった uglifyjs は現在オリジナル + 2つのforkがあり、すべてで再現する original: https://github.com/mishoo/UglifyJS fork 1: https:/

takutakuma 2018/10/13

リンク

業務で使える簡単なSSR + SPA のテンプレートを公開した - hiroppy's site

久しぶりのブログです。よく Node.js の人と思われがちですが、普段は Node.js でのバックエンド開発はもちろんですが React や Vue を書いていますので、たまにはフロントエンドネタを投稿しようと思います。 GitHub - hiroppy/ssr-sample: A minimum sample of Server-Side-Rendering, Single-Page-Application and Progressive Web App A minimum sample of Server-Side-Rendering, Single-Page-Application and Progressive Web App - GitHub ... リポジトリにあるコード見たほうが早いと思いますので、ここでは注意点等を列挙していこうかなと思います。主な技術スタック de

takutakuma 2018/08/07

リンク

webpack4への簡単なマイグレーションガイド - 技術探し

トラッキングローダー/プラグイン作者向け変更一覧簡単なマイグレーションガイド #0CJS(Zero-Config JS) 環境 Node4のサポートが切れました webpack-cliへの分離ローダー/プラグインのアップデートが必要 side-effects(old: pure-module) configファイル mode loadersからrulesへプラグイン変更 uglifyJS extract-text-webpack-plugin その他コード System.import() webpackInclude/webpackExcludeのサポートモジュールタイプ CJSとESMについて前提知識 javascript/esm さいごにまだ、公式の方で作成中の段階ですので、一旦ここにまとめます。この記事では、loader/plugin開発側の話はしません。 me

takutakuma 2018/03/05

リンク

Cacooの次期エディターでWebpackのビルドを6倍早くした話-Wepackビルドパフォーマンス改善ガイド | 株式会社ヌーラボ(Nulab inc.)

こんにちは。みなさまがCacooで図の編集をするエディターを開発している、Cacooチームの国広です。Cacooチームでは、エディター部分のビルドに Webpack を使用しています。ビルド対象はTypeScript、JavaScript、PostCSS、Riot（のtagファイル）、画像等です。そのままビルドするには少し我慢ならない程度に待たされるようになったので、Webpackの公式ドキュメントを見ながら少しだけビルドのパフォーマンスの改善を行いました。その結果、ビルドにかかる時間は当初のシンプルな構成に比べて6倍早くなりました。対象読者 Webpackを使用している人ビルドのパフォーマンスを改善したい人 Webpackのビルドパフォーマンス改善ビルドとは何か現在のCacooのエディターでは、いくつかのJavaScriptファイルをHTMLに読み込ませることでアプリを起動させ

takutakuma 2017/12/20

リンク

もっと速く！Webサイト高速化のためのwebpack活用入門

webpackを使ってアセットをバンドルすることで、HTTPリクエストの回数を削減し、ファイルサイズを縮小できます。Webサイトをもっと快適にするためのチュートリアルです。 webpackが大人気です。GitHubのスター数は30,000を超え、ReactやAngularといったJavaScript界の有名プレイヤーもwebpackを歓迎しています。 webpackの本質はバンドラーであり、webpackを使えばどんなリソースやアセットでもバンドルできます。大規模なプロジェクト以外でも活用できます。 webpackをインストールして設定する方法を説明します。いくつかのアセットを持つシンプルな静的サイトのための圧縮バンドルをwebpackで作成します。 webpackを使う理由主な理由は、サーバーへのHTTPリクエストの回数を減らすためです。Webページが大きくなると、jQuery、フォン