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
JSerレポート #2: Node.jsコアモジュールとBundler(webpackなど)によるpolyfillのギャップ - JSer.info
このレポートは、現在進行形で機能追加や仕様変更が行われているNode.jsコアモジュールとブラウザ向けpolyfillにおける挙動の違い(ギャップ)が広がってきている問題について調べたものです。 ここでは https://nodejs.org/api/ に掲載されているうち assertのようにNode.jsにバンドルされているモジュールのことをNode.jsコアモジュールと呼びます。コアモジュールはNode.jsでの利用のみを想定しているため、Node.jsに依存した処理を多く含んでいます。そのため、コアモジュールのコードをコピーしてブラウザなどで動かすことは難しいです。 webpackやbrowserifyなどのbundlerは、コード中にあるコアモジュールを代替モジュールへとすり替えます。この代替モジュールはブラウザ向けpolyfillライブラリとよび、このpolyfillライブラリ
🚀webpack 4 beta — try it today!🚀
Since the beginning of August — when we forked webpack/webpack#master for the next branch — we’ve seen an incredible influx of contributions! Git contribution stats for the webpack next branch at a glance using gitinspector! Try it on your project to see insights. PS: This doesn’t include the incredible work done in our webpack-cli team and webpack-contrib organization supporting our loaders and p
次のリリースであるwebpack 4の主な変更点まとめ - 技術探し
移行ガイド abouthiroppy.hatenablog.jp ドワンゴのアドベントカレンダーの17日が空いているので本来その予定で書かれた記事ではないですが、そこに埋めます。 2日連続になってしまった。。 qiita.com Happy Xmas, Noders! #Nodejs pic.twitter.com/Rsxr8SbeUz— hiroppy😶 (@about_hiroppy) 2017年12月24日 さて、今年は、webpack3.0.0が2017/06にリリースされました🎉 (現在、3.10.0) medium.com After we released webpack v2, we made some promises to the community. We promised that we would deliver the features you voted
Webpack and Rollup: the same but different
This week, Facebook merged a monster pull request into React that replaced its existing build process with one based on Rollup, prompting several people to ask ‘why did you choose Rollup over webpack’? Which is a completely reasonable question. Webpack is one of the modern JavaScript community’s greatest success stories, with millions of downloads every month powering tens of thousands of websites
webpack 4 入門 - Qiita
お知らせ（2020/08/25 追記） Udemy で「webpack 最速入門（10,800 円 -> 2,000 円）という講座を公開しました。 本来の価格は10,800円ですが、上記リンクからアクセスすると2,400円で購入できます。 どんな内容？ webpack を利用したフロントエンド開発環境が構築できるようになる、ハンズオン形式の講座です。 詳細は上記のリンクのプレビュー動画で詳しく説明しています。 記事との内容の違い 記事の内容に、以下の内容や特徴が追加された感じです。 実務で利用できる開発環境を徐々に構築していくので、記事と比べて実践的な内容 ハンズオン形式の講座なので、手を動かしながら webpack を学習できる webpack の設定ファイルに追加する値の詳細をすべて解説 記事では解説していない細かい補足や、機能のご紹介 なぜ npm scripts を利用するのか
🚀 webpack 2 and beyond 🚀
Today we’ve published webpack 2 to npm under the latest tag on npm! You can install it in your project using npm install webpack. 👀 Why Update? 👀The upgrade from webpack 1 to 2 comes with some very exciting features. 🙅 ES6 Support 🙅You no longer have to use babel to transpile import and export statements in your code. webpack now supports parsing of these statements. This allows us to leverag
Demystifying webpack2 tree shaking - from scratch
webpack2 に最近移行しました。 その時の知見とせっかくなので tree shaking が実際に中でやってることを追ってみたので紹介。 webpack2 移行時の注意 基本的にはほぼここに書いてあるとおり。 Migrating from v1 to v2 かいつまんで説明すると、configファイルの書き方がガラッと変わって、 module.loaders が module.rules になったり、 resolve.root がなくなって resolve.modules に変わったり。この辺の書き換えは割りとすんなりいくはず。 辛いのはpostcss周りのオプションの渡し方辺り。これまではconfigのrootにpostcssプロパティを用意してそこに記述できたが、その記述はできなくなり、 webpack.LoaderOptionsPlugin 経由で渡すか postcss.con
🎉 webpack 2.2: The Final Release 🎉
Last month we shipped our first Release Candidate for webpack 2.2. Since then, we’ve been hard at work fixing any bugs that you reported. Not only that, but we’ve merged over 220 pull requests from the community in helping us refactor our core library to ES2015 (yes, this means our minimum supported NodeJS version is now 4.3). On behalf of the entire webpack team, I’m proud to announce that webpac
JavaScriptライブラリ/プロジェクトのファイルサイズの問題点を見つける方法 - Qiita
ブラウザ向けのJavaScriptだとファイルサイズはある程度気になると思います。 この記事では、ファイルサイズの計測方法やボトルネックとなってるライブラリの見つけ方についてできるだけ簡単な方法をまとめます。 ファイルサイズと一言にいっても、ブラウザでは大体minifyしてから配布するのでminify後のファイルサイズも重要です。 ソースコード自体のファイルサイズ minifyしたファイルサイズ minify + gzipしたファイルサイズ コメントの多いソースコードはminifyするとかなり小さくなったりすることが多いので、ソースコード自体のファイルサイズでは比較しにくいです。 また、ソースコードにおいて assert モジュールを使っているとファイルサイズが10kb弱程度minify後で変わります。 assertモジュールは通常外しても問題ないので、unassertでビルド時に取り除き
Tree-shaking with webpack 2 and Babel 6
Rich Harris’ module bundler Rollup popularized an important feature in the JavaScript world: tree-shaking, excluding unused exports from bundles. Rollup depends on the static structure of ES6 modules (imports and exports can’t be changed at runtime) to detect which exports are unused. Tree-shaking for webpack is currently in beta. This blog post explains how it works. The project we are going to e
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webpackのビルド時間を1/3にした話 #gotandajs