人気のJavaScriptバンドルツール「webpack」の開発はなぜ終わり、後継として「Turbopack」の開発が始まったのか。開発者がその理由を語る

2023/01/30 359 users Webpack ビルドツール TypeScript リソース

人気のJavaScriptバンドルツール「webpack」の開発はなぜ終わり、後継として「Turbopack」の開発が始まったのか。開発者がその理由を語る 複数のJavaScriptやTypeScriptの依存関係などを解決し、コードやフォント、画像などのリソースなどをまとめるバンドルツール（あるいはモジュールバンドラやビルドツールなどとも呼... 続きを読む

いちばんやさしい webpack 入門

2022/05/02 358 users Webpack ハンドラー Bundle CSS モジュール

webpack is 何? webpack とは一言で言うと JavaScript 向けのモジュール・バンドラーです。 複数の JavaScript モジュールを一つ（またはいくつか）のファイルへバンドル（=bundle: 束にする、包む）　してくれます。 複数の JS モジュールを（場合によっては CSS や画像などのアセット類も）一つにまとめる モジュール... 続きを読む

やっぱりwebpackがわからない（エピソード1）

2022/01/29 338 users Webpack vite わし ネーミング Vue.js

webpackがわからない 最近はViteが注目されだして、実際にとても良いビルドツールです。Vue.jsのEvan Youさんが開発しただけのことはありますね。ネーミングもイカしてます。しかし、だからといって、では開発環境にViteを採用しようと簡単にはできないのが、業務の辛い所です。新しい技術を採用して、「わしが全責任を... 続きを読む

JavaScriptツールチェインの統一を目指す「Rome」開発チームが起業、「Rome Tools, Inc.」を立ち上げ － Publickey

2021/05/05 117 users Publickey Rome Webpack Babel 統一

JavaScriptツールチェインの統一を目指す「Rome」開発チームが起業、「Rome Tools, Inc.」を立ち上げ 現在、モダンなJavaScript開発環境としては、ESLintに代表される構文チェッカーや、Babelに代表されるJavaScript変換ツール、モジュールを組み合わせるなどのバンドル操作を行うWebpackなど、さまざまなツールを組み合... 続きを読む

Native ESM 時代のフロントエンドビルドツールの動向

2021/03/09 111 users Native ESM 動向 Webpack rollup 時代

No Bundle ツールの流行: vite / rollup モダンブラウザは Native ESM を備えているので、開発時は高速な localhost アクセスを頼って直接 import する、外部ライブラリだけ事前にコンパイルしておく、という手法が流行ってきている。プロダクション用は今まで通りビルドする。 webpack はすべてを一つにバンドルするた... 続きを読む

Webpackを一歩一歩確実に理解してReact + TypeScript環境を作る - Qiita

2020/06/20 250 users Webpack Qiita React 先入観 動機

※自分のブログに投稿したのものと同じです。 https://mr-ozin.hatenablog.jp/entry/2020/06/20/043243 動機 毎回 npx create-react-app で React アプリを生成していて Webpack の勉強から逃げていたが、いい加減向き合いたいと思ったため。 昔 Webpack に入門しようとしたら難しいという先入観を抱いたので、できるだけ... 続きを読む

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

2020/05/03 193 users Webpack mizchi's blog

基本思想 基本は ts-loader を transpileOnly: true で使うだけ。最悪これだけでいい。型チェックはIDEか yarn tsc -p . --noEmit でやる。 CRA や parcel は使わない。暗黙な振る舞いが多すぎるので。一切勉強したくない人はいれていいと思うが、その場合 dist ディレクトリをそのまま使うこと前提 style-loader/css-lo... 続きを読む

モダンJavaScript概論 − Node, npm, ECMAScript, Babel, Webpack | Hypertext Candy

2020/04/30 291 users Webpack ECMAscript Babel npm 前提

2020.04.30 モダンJavaScript概論 − Node, npm, ECMAScript, Babel, Webpack この記事では、モダンな JavaScript を書くための前提として知っておくべき、いくつかのキーワードを紹介します。想定読者は、初心者 〜 jQuery なら書けるレベルの開発者です。これから React や Vue.js を学びたい方、または Web 開発の世界... 続きを読む

Webpackの70倍！Go言語で書かれたJavascriptバンドラー「esbuild」をベンチマークテストしてみた - ITnews

2020/02/18 158 users Webpack ハンドラー ITnews esbuild 現代

ITニュースピック一覧Webpackの70倍！Go言語で書かれたJavascriptバンドラー「esbuild」をベンチマークテストしてみた esbuild https://github.com/evanw/esbuild/ esbuildの特徴 複数モジュールの依存関係を解決し、1つにまとめるバンドラーは、現代のフロントエンド開発においてなくてはならないツールの1つ。 The Sta... 続きを読む

Simpacker: Rails と webpack をもっとシンプルにインテグレーションしたいのです - クックパッド開発者ブログ

2019/07/08 126 users Webpack Rails hokaccha 外村 gem

技術部の外村（@hokaccha）です。Rails で webpack を使うためのシンプルな gem を作ったのでそれについて紹介します。 Webpacker Rails で webpack を利用した Web フロントエンドの環境を作る場合、最近では Webpacker が選択されることが多いでしょう。Rails 6 からは Webpacker が標準になることもあり、この流れは... 続きを読む

面倒なJavaScriptコードのとりまとめがこれ1つで可能に、「webpack」入門 | さくらのナレッジ

2019/06/18 556 users Webpack ナレッジ 結合 概念 変換

最近JavaScript関連の開発で採用が進んでいる「webpack」は、JavaScriptファイルの変換や結合といった操作をコマンド1つで実行できるツールだ。本記事では、webpackとは何かという基本的な概念から導入方法、実際の利用例などを紹介する。 モジュール管理機構の不足や未サポート機能の問題をツールで解決する「webpack」... 続きを読む

フロントエンドの開発環境に Docker は不要(少なくともMacでは) - mizchi's blog

2019/04/06 402 users Docker Webpack driver Cache Mac

これについて speakerdeck.com 自分の意見 Web開発者の主要な開発環境である Docker for Mac は I/O がとにかく遅い (3x~5x) data volume の driver やら cache を工夫しても遅い npm install/webpack は 基本的に I/O ヘヴィー とくに大規模開発時の watch => build がクリティカル webpack.conifg の entry で自分が関... 続きを読む

OSSで報酬が支給された話 - 技術探し

2019/03/18 288 users OSS Webpack 報酬 hiroppy Total

ところでOSSによって数十万近くの報酬を受け取れるのですが、どう経費精算すればいいのかわからないので困っています。— hiroppy (@about_hiroppy) March 16, 2019 注意: あくまでもこれはwebpackの話です 2月分のOSS活動費 2月分のOSS活動費が以下の額で支給されます。 $1674(186,620.87円) Total: $2093(233,331.83円)... 続きを読む

webpackとBabelの基本を理解する(1) ―webpack編― - Qiita

2019/03/03 220 users Webpack Babel Qiita 独学 基本

独学の内容をまとめたものです。誤りがございましたら、ご連絡いただけると幸いです。 リンク 1. webpackとBabelの基本を理解する(1) ―webpack編―（本記事） 2. webpackとBabelの基本を理解する(2) ―Babel編― 3. webpackとBabelの基本を理解する(3) ―webpackとBabel編― 4. webpackとBabelの基本を理解する(4) ―React編― ... 続きを読む

webpackの仕組みを簡潔に説明する - 技術探し

2018/12/25 419 users Webpack 技術

この記事は、Node.js Advent Calendar 2018の18日目の記事です。 遅れてしまい本当に申し訳ありません。 この記事は、HMLT5カンファレンスで話した内容が中心となります。 events.html5j.org モジュール モジュールタイプ 実行の仕組み Hot Module Replacement (v1) Tapable (v1) Tree Shaking & Dead Code Elimination ... 続きを読む

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

2018/12/14 201 users GitHub maxmellon Webpack ラク 新卒

はじめに リクルートテクノロジーズに4月に新卒入社した 辻 健人です．GitHubではmaxmellonで活動しています． 7月より，やりとりも作成もラクになるシフト管理サービス「Airシフト」 のエンハンス開発を担当しています． 以前は，React製SPAのパフォーマンスチューニング実例という内容で記事を書きました． 今回は同じ... 続きを読む

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

2018/11/26 606 users Webpack mizchi's blog 考え方

なぜ初心者は webpackが解らないのか？- Why can’t you understand the webpack? - from 健人 井関 www.slideshare.net この記事バズってたけど、わからない人がよりわからなくなる、という点で問題だと思っていて、webpack の目的の本質的な部分から整理する必要があると思います。 (あと友人が webpack に挑戦していた... 続きを読む

なぜ初心者は webpackが解らないのか？- Why can’t you understand the webpack? -

2018/11/25 387 users Webpack 井関 Ruby PHP JavaScript

なぜ初心者は webpackが解らないのか？- Why can’t you understand the webpack? - 1. なぜ初心者は webpackが解らないのか？ - Why can’t you understand the webpack? - 2018/06/20 Fukuoka.js #4 LT 2. ● 井関 健人(@take2webservice) ● フリーランスのWEB系エンジニア ● PHPとかJavascriptとかRubyとか触ってます ● ... 続きを読む

なぜ初心者は webpackが解らないのか？- Why can’t you understand the webpack? -

2018/11/24 387 users Webpack 井関 Ruby PHP JavaScript

なぜ初心者は webpackが解らないのか？- Why can’t you understand the webpack? - 1. なぜ初心者は webpackが解らないのか？ - Why can’t you understand the webpack? - 2018/06/20 Fukuoka.js #4 LT 2. ● 井関 健人(@take2webservice) ● フリーランスのWEB系エンジニア ● PHPとかJavascriptとかRubyとか触ってます ● ... 続きを読む

carlo + parcelでお手軽デスクトップアプリケーション - Qiita

2018/11/14 238 users Parcel Electron Webpack Qiita

ウェブ技術でデスクトップアプリを開発するとなると、一番メジャーなのはやはりelectron/electronでしょう。ところがElectronは割と面倒です。配布ファイルのサイズ、セキュリティなど。 それとバンドラとして有名なWebpackですが、こっちも仰々しいです。 そこで今回はライトウェイトでゼロコンフィグな、carloとparcel... 続きを読む

JavaScript おじさんが教える本当の Modern JavaScript 入門 1

2018/08/22 486 users 入門 Modern JavaScript Parcel 開発

本発表における Modern JavaScript とは何か Phase 1 として以下の環境での開発ができれば Modern JavaScript に入門できたものとする。 Webpack, Parcel 等の module bunder による "module system" の活用。 ES2015+ や TypeScript といった "Alt JS" の使用。それに伴う Babel によるトランスコンパイルツールの使用... 続きを読む

今日から簡単！Webpacker 完全脱出ガイド - pixiv inside

2018/08/06 260 users Webpack pixiv inside Rails gem

こんにちは、@f_subal です。普段はおもに pixivFACTORY のフロントエンドを見ています。 今回は pixivFACTORY において、フロントエンドのビルドに Webpacker を利用するのをやめた話をします。 Webpacker をやめよう rails/webpacker は Ruby on Rails のプロジェクトに webpack を導入する際に用いられる gem です。... 続きを読む

2018年、フロントエンドのデベロッパーがプロジェクトで使用しているCSS, JavaScriptのツールを調査 | コリス

2018/05/15 107 users コリス デベロッパー npm Webpack CSS

フロントエンドのデベロッパーがプロジェクトで使用しているCSS, JavaScriptのツールについての調査結果を紹介します。 SassやLESS、BootstrapやFoundation、AutoprefixerやModernizr、BEMやCSS-in-JS、CSS GridやFlexbox、NPMやGulp、jQueryやReactやVue.js、WebpackやESLintなど、実際にどの... 続きを読む

Big Sky :: Golang と Vue.js で簡単なアプリケーションを作ってみた。

2018/03/30 231 users golang Webpack Element ToDo CDN

Go と Vue.js を使ってどれくらいシームレスに作れるかを確認したかったのでタスク管理アプリを作ってみた。サーバは Go なので vue-cli や webpack 等は使わない。全て CDN から。Vue.js でアプリのベースを、UI コンポーネントとして Element 、Ajax ライブラリとして axios を使った。 以前、 Riot.js を使って Todo アプリを作った 時... 続きを読む

最新版で学ぶwebpack 4入門 - スタイルシート(CSSやSass)を取り込む方法 - ICS MEDIA

2018/03/05 144 users Webpack モジュールバンドラー Sass CSS 焦点

ウェブのフロントエンドエンジニア開発で人気を集めるモジュールバンドラーのwebpack（ウェブパック）。webpackにはJavaScriptファイルのバンドルだけではなく、スタイルシート(CSSやSass)のバンドルもできます。ICS MEDIAの記事「 最新版で学ぶwebpack 4入門 」では、webpackの基本的な使い方を解説しましたが、この記事ではスタイルシートに焦点をあてて解説します... 続きを読む