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の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の基本部分を明確にして考
Webpackバンドルを占めるサイズがでかい奴を探す方法 - Qiita
はじめに Webpackでビルドしてできあがったバンドルが、気付いたらサイズが超でかいよ！！ なんて時の犯人探しに役立つかもしれないTips。 webpack --display-modules で分析 webpackコマンドの実行時に--display-modulesオプションを付けると、インクルードしたnode_modulesやbower_components配下のモジュールについても詳細情報がわらわらと出力されるようになる。ここにサイズも出力されている。 $ webpack --display-modules Hash: 20265560bd210ea64e82 Version: webpack 1.12.12 Time: 7110ms Asset Size Chunks Chunk Names bundle.js 2.76 MB 0 [emitted] main [0] multi
Hot Module Replacementの設定と仕組みを理解する - Qiita
Hot Module Replacement (HMR)はwebpackの提供する仕組みで、画面の再描画すること無しにJSの変更をブラウザに適用してくれる開発ツールです。再描画無しにと言うのは、「F5とかリロードボタンを押さなくても自動的に再描画してくれますよ」ということではなく、文字通り変更したモジュールのみを置き換えてくれます。 Reactを導入して開発環境を整えると、当然のようについてくるので使う分には意識する必要もないですが、、 で、これって何なんだっけ？というのを整理しました。 HMRは、Websocket通信と、ソースコードに注入されたいくつかのRuntimeと呼ばれるスクリプトによって実現されます。ソースコードの変更をコンパイラが検知し、WebSocketでブラウザに通知、通知を受け取ったRuntimeはサーバーから変更分のスクリプトを取得してモジュールを置き換えます。 前述
Browserify x UglifyifyからWebpackへの移行 - console.lealog();
あっさりできたけど、一部つまるところもあったので一応メモっておく。 タイトル以上のことは求めてなくて、いわゆる最小構成からはじめたい場合にもどうぞ。 なんで エントリーポイントが1つから2つになってしまったから。 BrowserifyはINとOUTの指定が対になってて、1組しか指定できないので、複数のエントリーポイントに対応するには複数回コマンドを叩く必要がある。 npm scriptsでやってる場合に、`npm run build`的なのを複数やらなあかんのはなんだかなーということで。 RequireJS時代からいいなとは思ってたけど、Webpackならそれが自然に書けるのです！ webpack.config.js var webpack = require('webpack'); var IS_PROD = process.env.NODE_ENV === 'production';
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"
webpack で Chrome 拡張を作って得られた知見 - もなでぃっく
文書校正ツール textlint の Chrome 拡張を作ったのですが、その開発の過程でハマった問題や対策などを記録として残しておきます。 なお、textlint 拡張のソースコードは GitHub で公開しています。 github.com 1. textlint Chrome 拡張の仕組み textlint とは azu さんが作成している文書校正ツールで、Node のパッケージマネージャである npm を通してインストールできるようになっています。中身は当然 Node の JavaScript 製であり、モジュールとして Node で読み込んで利用する事もできるため、textlint 拡張ではそれを利用しています。 Node のコードを Chrome 拡張として動かすにあたり、Chrome 拡張の JavaScript エンジンはブラウザとしての Chrome のものと同等なため、そ
hot module replacement
HomeGetting StartedMotivationWhat is webpack?InstallationUsageRequire ModulesVendor ModulesUsing LoadersUsing PluginsDev ToolsTroubleshootingtutorials and examplesGetting startedList of tutorialsexamplesGuidesCommonJsAMDwebpack for browserify usersCode SplittingStylesheetsOptimizationLong-term CachingHow to write a loaderHow to write a pluginMultiple entry pointsLibrary and externalsShimming modul
こないだ社内の勉強会でwebpackのこととか話したのでまとめた - getalog
webpackとは いろんなファイルをtranspileしてES5のJavaScriptに変換してくれるやつ AMDかCommonJSの形式でファイルをロード(CommonJSならrequire)すると、transpileしたファイルをロードしてくれる クライアント側のjsコードでもrequireを使用することができる assetとしてビルドして配布するイメージ コードが共用の場合、設定を変えることで素のrequireを利用するサーバー用コードと、webpackがpolyfillしたrequireを利用するクライアントコードとを別々に生成できる 全てがJavaScriptになる、画像やCSSも 画像は「Base64かFilePath」に CSSは「headにstyleを挿入するjsコード」に 特定のファイルをどのようにtranspileするかはpathマッチングでプラグイン形式で設定する
Learn React by itself -- no JSX, no Flux, no ES6, no Webpack.
Disclaimer: I love JSX, Flux, ES6 and Webpack. I’ll discuss these tools more in another series. Update August 2018: A newer, more complete introduction to React’s fundamentals is available at my course “React (without the buzzwords)”. It uses the latest version of React, and covers many topics that “Learn Raw React” is missing, including component state, asynchronous data storage, JSX, structure b
webpack+babel-loader+power-assert+jsdomでフロントエンド開発環境を作る - yutaponのブログ
この記事は JavaScript Advent Calendar 2015 10日目の記事です。 去年は主に gulp にフォーカスした内容でしたが、今回はJSのビルドとテストにフォーカスした入門記事です。 やること ES2015で書いたコードをWebpackでビルドする babel@6系を使う Mocha + power-assert + jsdom でテストを書く やらないこと gulpまわり React.js CSSビルドまわり 最終的なコードはこちらに上げておきました(すごく簡素な出来です)。 GitHub - sskyu/webpack-power-assert-jsdom-skeleton はじめに 今年はReact.jsがJSerの中で定着した感がありました。 Fluxの考え方を昇華させたReduxがFlux系フレームワークでデファクトになりそうな雰囲気を出しつつ、React
Introduction
Webpack simplifies web development by solving a fundamental problem: bundling. It takes in various assets, such as JavaScript, CSS, and HTML, and transforms them into a format that's convenient to consume through a browser. Doing this well takes a significant amount of pain away from web development. It's not the most accessible tool to learn due to its configuration-driven approach, but it's incr
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - robertknight/webpack-bundle-size-analyzer: A tool for finding out what contributes to the size of Webpack bundles
GitHub - FormidableLabs/electron-webpack-dashboard: Electron Desktop GUI for Webpack Dashboard
GitHub - adventure-yunfei/package-size-analyzer: Size analyzer for npm package, webpack bundle ...
WebPack Code splitting with ES6 and Babel 6
babel6での変更点 Gulp・Webpackの設定 - Qiita
GitHub - mjohnston/react-native-webpack-server: Build React Native apps with Webpack
GitHub - jhabdas/react-native-webpack-starter-kit: Build your React Native app with Webpack and Babel
GitHub - survivejs/react-book: From apprentice to master (CC BY-NC-ND)
