sourcemap を無効化して webpacker の production build を 2000% 速くする - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
webpack -> FuseBox 移行メモ - Qiita
webpackを使っていたプロジェクトをFuseBoxに移行してみました。 バンドル時間が超速くなり、バンドルファイルサイズが超小さくなりました。 webpack FuseBox package.json package.jsonの比較です。 "devDependencies": { "babel-cli": "^6.26.0", "babel-core": "^6.23.1", "babel-eslint": "^8.0.0", "babel-loader": "^7.1.2", "babel-preset-es2015": "^6.22.0", "babel-preset-flow": "^6.23.0", "babel-preset-react": "^6.23.0", "css-loader": "^0.28.7", "eslint": "^4.6.1", "eslint-load
webpack.config の黒魔術をとく - Qiita
はじめに Node.js向けに書かれたJavaScriptのプログラムをブラウザ上で動作させるには require() によるモジュールの参照を解決した単一のJavaScriptファイルに変換する必要があります1。 少し前まではこの作業には Browserify が使われることが多かったようですが、現在は「画像もCSSも何でも1つにします」が売りの webpack 一色になっている感じです。ですが、この webpack、とってもわかりにくいのです。設定ファイル webpack.config.js を見たときに私は TeX や sendmail の悪夢を思い出しました2。この黒魔術3を読み解いてみましょう。 webpack の仕事 画像とかCSSとかのことはおいておくと、webpackの仕事は以下の3つになります。 複数の.jsファイルの依存関係を解決し、1つにバンドルする これが本来業務で
Gulpで始めるwebpack 4入門 - Qiita
webpackは複数ファイルのJavaScriptファイルやCSS、画像ファイルをモジュールとして取り扱う為の人気のツールです。2018年7月時点の最新バージョンは4.16（いちろく、ではなくじゅうろく）です。 ▲ webpackの公式サイト webpackはJavaScriptのモジュールの取り扱いに特に便利で、機能ごとに分割したJavaScriptをimport()やrequire()を使って読み込めるようになります。ビルドツールGulpと組み合わせれば、大規模なプロジェクトでも見通しのよいタスクを定義可能です。 webpack 4をGulpで使用するには一工夫が必要なので、本エントリーで紹介します。 なお、webpackについて詳しくは記事「最新版で学ぶwebpack 4.8入門 - JavaScriptのモジュールバンドラ - ICS MEDIA」を参照ください。 環境準備 Gul
webpackのDLLバンドルを使ってビルドを速くする - Qiita
How to make your Webpack builds 10x faster 「webpackビルドを10倍速くする方法」というスライドを見つけた。 内容を要約すると、こんな感じ。 css-loaderは0.15未満を使う cacheDiretoryはデフォルトで無効だから有効にする HappyPackを使う DLLバンドルを使って、静的コードのバンドルを分ける DLLバンドルは聞いたことがなかったので調べた。 DLLバンドルとは Dll bundles doesn't execute any of your module's code. They only include modules. モジュールをまとめただけのbundleで、scriptタグで読み込んだ時点では含まれるモジュールは実行されず、他のbundleから参照された時に実行される。
Code SplittingでどれくらいReactアプリの初回ロード時間を減らせるか試してみる - Qiita
ということで、前々回書いた通りSSR(Server Side Rendering)したくない派ですが、CSRの問題は解決したいので今回は初期ロード時間対策でCode Splittingを試してみます。 基本的なことしか試さないので、一度も試したこと無い人向け程度の内容かと思います。 Code Splitting この記事で言うCode Splittingはこのproposalにあるdynamic importを使ったCode Splittingのことです。react-routerを使った場合にrouteごとにjsファイルを分けることで、初期ロード時に1つの大きなバンドルされたjsファイルを読み込むのではなく、それぞれのrouteごとに必要最小限のjsファイルを読み込むことで初期ロード時間を低下させることを目的としたものです。(Routeは今回のデモのための例で、Route以外の用途にも使う
逆引きWebpackの使い方 - Qiita
cloudpack あら便利カレンダー 2017 10日目の記事です。 最近はもっぱらWebpackです。 gruntがあんまり好きになれず、その後にきたgulpでしばらくやってましたが、 昨年からはもっぱらWebpackを使うようになりました。 npmに公開されているライブラリをモジュールとして扱いやすかったり、 JSフレームワークをつかったSPAサイトのソースコンパイルがしやすかったりと最近のフロントエンド開発を行うにはなにかと便利なツールです。 ただ実際開発に利用するとなると何かとこれはどうするの？ってのが出てくるので逆引き的に使えるようなリストを書きました。 基本公式サイトにのってる内容になります。 Webpack公式 ざっくり知っときたいけど、英語の公式読むの面倒ってかたの役に立てばいいなーと思います。 出力するファイルをわける、名前を指定する まずは基本編。 const pat
TypeScript + webpackでサーバサイドもTypeScriptしようぜのはなし - Qiita
主はおっしゃいましたwebpackはフロントエンドのjavascriptにだけ与えられたものではないと。よろしい!ではサーバサイドもTypeScriptでwebpackでes5(or es6 or es2015(まさかり対策))にしようではないか。 今回のサンプルはこちらに保存してありますm(_ _)m サーバサイドnodejsにも型が欲しかった そもそも、サーバサイドなら別に他の言語を使いなさいというのはもっともですが、IOレイヤーの処理のひとつにスクレイピングでデータを取得するという部分があって(もちろんseleniumでもいいんだが)、そいつをnightmareで書いていたので、これはもうwrapするレイヤーもnodejsで行くしかないなっという背景であります。 ただせっかくですし、サーバサイドですし、割りときっちりした型がほしいなぁと思いまして。それでTypeScriptをサーバサ
Vue.jsとUIkitでつくるフロントエンド環境 - Qiita
最近社内ではVue.jsが流行っています。 世間でも人気は上々のようで、混沌としたフロントエンドフレームワーク界隈でも一番気軽に使えると評判です。 UIkitはbootstrapなどと同じようなスタイルライブラリです。 あんまり巷では噂は聞かないのですが使い勝手がよくこちらも業務で愛用しております。 UIkitがver.3になってWebpackでインポート出来るようになったのでスターターキットを作成しました。 UIkitが3になって個人的に嬉しかったのはWebpack対応とScss版が出来たこと。 ちなみにUIkitの公式サイトもVue.jsで作成されています。 そこで今回はスターターキットの説明をしながらVue.js,UIkitのよいところを書こうと思います。 ※UIkitの説明がメインになってしまったのでVue.js,vue-loader,Webpackとかわかんねえよって方は意味不明
webpackチートシート - Qiita
フロントまわりのツールは群雄割拠してる感がすごくて手を出せずにいたのですが、Rails5.1 で gem webpacker が導入されたこともあってwebpack/yarn構成に魅力を感じています。 今どきのモジュール/パッケージ管理したいので、まずはwebpackです。 概要 webpack = JavaScriptファイルのバンドラ モジュール単位に分離されたjsファイルをひとつのjsファイルにまとめる(バンドルする) 結合の過程で、jsファイルの依存関係を解決する CommonJS, AMD, ES6 Moduleなど復数のモジュールシステムに対応する 競合はrequire.js(依存解決), browserify(バンドル)など オープンソース, MITライセンス 導入 npmでインストールする。 プロダクション環境ではバンドルした状態で配置するわけなので、開発環境のみを指定する
【意訳】Webpackの混乱ポイント - Qiita
この記事はWebpack — The Confusing Partsを、筆者の許諾を得て意訳しています。 何か誤りがありましたら、ご指摘いただけると幸いです。 (以下、訳) ReactとReduxで作られたアプリケーションにとって、Webpackは最先端を行くモジュールバンドラです。Angluar2やその他のフレームワークを使っている人々は、たいへんWebpackのお世話になっていることでしょう。 私が初めてWebpackの設定ファイルを見た時、それはさながら宇宙人のようで非常にわかりづらく見えました。しばらく試しているうちに、今では次のように考えるようになりました。Webpackは単に独特のシンタックスと新しい哲学を持っており、それがとっつきにくさの原因になっているのだと。偶発的とはいえ、これらの哲学は、Webpackの人気を押し上げた原因の１つでもあります。 Webpackのとっつきに
Webpackってどんなもの？ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 初めてのWebpack 今回はWebpackについて紹介したいと思います。 私自身は今回初めて使ったのですが、小規模なプロジェクトの途中から導入していて、 使ってみて結構良い感じなので記事にしてみました。 Webpackとは Node.jsでサーバーサイドで動かすモジュールバンドラーツールになります。 Node.jsでモジュールという単語を聞くと、「npmやbowerとかと何が違うの？」みたいな印象を持たれる方もいるかもしれませんが、基本的にはそれらとはまた違った役割をもっています。 npmやbowerはJSライブラリのバージョン管理な
なんとなくで理解しないWebpackのCSS周辺 - Qiita
CSS in JSに夢を見たが、なかなか一筋縄では行かなかったので1、webpackにおけるCSSと本気で向き合ってみた。 しかしまだ理解が甘いところがあったのでloader, pluginまわりの関係性を整理した。 （前置き）webpackの基礎情報 css関連の本題にはいる前に、webpackの基礎を再確認する。 Webpackの特徴 webpackの特徴的な事項として、CSSや画像など、javascriptでないデータも基本的に全てをjavascriptで扱ってしまう、という事が挙げられる。 同等の対抗として挙げられるbrowserifyやrollupは、あくまでも「javascriptのmodule解決」にフォーカスしているのに対して、webpackは全く違う方向を向いている loaderとpluginの違い 結構あやふやに扱っていたが、上記のwebpackの基本部分を明確にして考
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フロントエンドエンジニアのための webpacker - Qiita
Serverless + Webpack + TypeScript + tslint メモ - Qiita
webpack2 でのコード分割 (Code Splitting) について調べる - Qiita
webpackでbower使って外部ライブラリの依存解決する - Qiita
gulp + webpack + reactの最小構成 - Qiita
webpack のチュートリアルをやってみる - Qiita
モジュール管理、だけじゃない-Webpack入門 〜 JSおくのほそ道 #029 - Qiita
