Webpack チャンク最適 テクニック - Qiita
ターゲット 巨大なSPAを作ってしまった人へ 巨大なSPAを作らないように気をつけたい人へ 今回はJSだけにフォーカスするが、もっというと、 超速本 を読んでください。 注意：本資料は、webpack チャンクの挙動を概念的に説明することを重視しているので、 webpack の詳細な設定や、出力ファイル名などは実際の処理と一致しない。適宜自分の手元にある設定とすり合わせるように。 昨今のJSビルド問題と、その解決のためのゴール設定 巨大なJS(+最近は in JS された各種SVGやCSS)はダウンロードだけではなく、UIスレッドのCPUをブロックする。 これはとくにCPUが貧弱な端末で体験が悪化する。そしてビルド時間で開発者体験を阻害する。 できれば webpack 推奨の 144kb 以内にしたい…が現実的に難しいので、 せめて 350kb ぐらいに抑えたい。 SPAなら (ローディン
【webpack】環境によってビルドする内容を分ける方法 - Qiita
jsのconfigファイルが本番環境と開発環境で違う場合があります。 しかしconfigファイルを含んだファイルをビルドする場合、phpのように.envで分けるみたいなことが出来ません。 そこで、本番環境用にビルドする時と、開発環境用にビルドする時でコマンドを分けることで、この問題が解消されます。 この分ける方法には大きく３つの方法があります。 状況に応じて使い分けていただければと思います。 独立した設定ファイルを作る方法 webpackはデフォルトではwebpack.config.jsというファイルに設定を定義します。 これを開発用と本番用でファイルを分けて別々に実行します。 例えば 開発用はwebpack.dev.js 本番用はwebpack.prod.js で別々に作ります。 そしてビルドする時は 開発用ならwebpack --config webpack.dev.js 本番用ならw
webpack4対応webpack-dev-serverの主要な設定オプション(CLI,webpack.config.js)の意味と挙動 - Qiita
webpack4対応webpack-dev-serverの主要な設定オプション(CLI,webpack.config.js)の意味と挙動JavaScriptNode.jswebpackwebpack-dev-server 概要 Webpack 4を利用した開発に便利な webpack-dev-server の設定メモです。 webpack-dev-serverのソースコードと公式wiki、公式Docを参考に実動確認した結果を書きます。 HMR等オートリロード系の設定(--hotとかとか--inlineとか)やよく使いそうなCLIオプションなど理解しておくためのメモです。 環境 本投稿で使っている環境は以下の通り。 webpack-dev-server:3.1.7 webpack:4.17.1 webpack-cli:3.1.0 webpack-dev-server とは webpack-d
2018 年の tree shaking - 株式会社カブク
Discussion 1. CommonJS は tree shaking されない ※追記、修正あり すべてのモジュールバンドラーが、 import { isEqual } from 'lodash'; を tree shaking できませんでした。これは、 CommonJS は静的に解析することができない困難または不可能（2018/06/15 修正）なためです。 例えば、 ES Modules の import, export に対応する CommonJS の require、 exports は、それぞれ以下のように動的に書くことが許容されています。 require const fooOrBar = require(Math.random() < 0.5 ? 'foo' : 'bar'); exports for(const name of ['foo', 'bar']) { ex
webpackのHot Module ReplacementでWebフロントエンドを爆速開発 - Qiita
背景 エディタでJavaScriptやCSSを編集し、ブラウザにフォーカスし、リロードボタンを押し、フォームを入力し、動作がおかしいことを確認し、エディタをにフォーカスし直し、・・・（以下無限ループ） このサイクルの周期に開発期間が比例すると言っても過言ではないと思います。 Dan Abramov氏が公開しているReact Transform Boilerplateを参考にすると、 テキストエディタでコードを保存するとブラウザ内のコンテンツが自動的に更新されます。 更に、このシステムではHot Module Replacementが使われているため、更新時にページの全読み込みは発生せず、フォーム入力等のステートが保存されたまま修正した箇所のみが更新されるため、検証のために何度もステートを変える必要がなくなります。 ただ、React Transform Boilerplateはバックエンドサ
webpack(v1)とbabelでES6コードをさくっと書く - getalog
最低限のコストで最近よく聞くいい感じのjsを書きたい時の構成をずらーっと書いてみる 準備するもの node/npm (最近はrbenvクローンのnodenvがいい感じ、操作は同じ) webpack babel .babelrc .babelrcを設置しとくとbabelのデフォルト設定がこいつの中身で書き換わる Reactを使わないなら、presetのreactはいらない export defaultされたパッケージをimportした時に.defaultで引くのを許せるなら、add-module-exportsはいらない(後述) Reactいる { "presets": [ "es2015", "stage-0", "react" ], "plugins": [ "add-module-exports" ] } いらない { "presets": [ "es2015", "stage-0"
Managing jQuery plugin dependency in webpack
I'm using Webpack in my application, in which I create two entry points - bundle.js for all my JavaScript files/codes, and vendors.js for all libraries like jQuery and React. What do I do in order to use plugins which have jQuery as their dependencies and I want to have them also in vendors.js? What if those plugins have multiple dependencies? Currently I'm trying to use this jQuery plugin here -
shimming modules
HomeGetting StartedMotivationWhat is webpack?InstallationUsageRequire ModulesVendor ModulesUsing LoadersUsing PluginsDev Toolstutorials and examplesGetting startedList of tutorialsexamplesGuidesCommonJsAMDwebpack for browserify usersCode SplittingStylesheetsOptimizationLong-term CachingHow to write a loaderHow to write a pluginMultiple entry pointsLibrary and externalsShimming modulesTestingBuild
webpackを使い倒す - Thujikun blog
本エントリーJavaScript Advent Calendar 2014 7日目の記事になります。 webpackとは 概要については最近いろんな方が書いてるいるのでそちらを参考にしていただければつかめるかと。 全部のせRequireJSっぽいWebpackを使ってみた。 RequireJS等はもう古い。WebPackとは？ ようはナウいフロントエンドの依存解決ツールですね。 っていうネタで書こうと思っていたら、昨日yutaponさんが既に書いていたりするので（gulp.jsを使ってフロントエンドのビルドをする【webpack, stylus】）、いいところはパクリ参考にしつつ、もうちょっとwebpackに突っ込んだ内容を書いてみようと思います。 Options entryとoutput 簡単に試すときはentryは1ファイルだけ指定できればよいですが、実際にプロジェクトで使うとなると複
webpackでbower使って外部ライブラリの依存解決する - Qiita
したい 解決方法 bower_components以下のディレクトリもrequire pathにいれて、resolverプラグインで解決するようにする。 というかこの記事でやってることは、基本的には usage with bowerのまんまなんだけど… 実例 var webpack = require('webpack'); var path = require('path'); module.exports = { output: { filename: 'app.js' }, resolve: { root: [path.join(__dirname, "bower_components")], extensions: ["", ".js"] }, plugins: [ new webpack.ResolverPlugin( new webpack.ResolverPlugin.Dir
全部のせRequireJSっぽいWebpackを使ってみた。 - Qiita
自分のお守りしているプロジェクトがいい加減だるだるになってきてモジュール管理しないとしないと死んじゃう!! みたいな状況になってきた。 RequireJSを導入しようとしていたはずが、何故か気がついたらWebPackを試していた… その間の記憶は全くない。 Webpackって何? RequireJSと同じく、モジュール管理/バンドル化をしてくれるツール AMD(RequireJSのやつ), CommonJS形式両対応 Jade、CoffeeScriptのローダーもある コード分割(Code Spliting) ... 非同期でモジュールを読み込む機能 WatchしたりUglifyもしてくれる(Gruntとかぶってる) Browserifyとの比較記事を見かけたがBrowserify使ったこと無いので良し悪しは分からず... 導入 npmからインストールする。gruntで使いたいので、gru
gulp.jsを使ってフロントエンドのビルドをする【webpack, stylus】 - yutaponのブログ
この記事はIwate Developers Advent Calendar 2014の6日目の記事です。 Iwate Developers Advent Calendar 2014 - Qiita 記事の内容はというと、岩手にまったく関係ありません。 学生の頃はフロントエンドを軽視してクソコードを量産していたので、今の学生の方にこんな風に作り始めるといいよって紹介する感じで書きたいと思います。 はじめに 昨今のフロントエンド開発はとにかく複雑になってきていて、学習コストが半端なくなってきてます。 angularとかbackbone.jsとか、最近ではreact+fluxなど、トレンドの移り変わりが激しいです。 またGruntやgulp.jsなどのタスクランナーの活用がフロントエンドでは欠かせなくなっていて、使ってないなら今すぐ導入すべき、とも言えます。 最近gulp.jsを使っていて、gu
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フロントエンドエンジニアのための webpacker - Qiita
GitHub - gaearon/react-transform-boilerplate: A new Webpack boilerplate with hot reloading React components, and error handling on module and component level.
https://github.com/webpack/webpack-with-common-libs/blob/master/Gruntfile.js
multiple entry points
webpack/examples/multiple-entry-points at main · webpack/webpack