タグ「Webpack」 - はてブログ

タグ Webpack

新着順人気順 5 users 10 users 50 users 100 users 500 users 1000 users

(1 - 25 / 122件)

webpack to Rspack ~ Rspack移行の結果と注意点 ~

2024/10/01 10 users ビルドツール rust Rspack 結果注意点

プロダクトのビルドツールを webpack から Rspack に移行したので、その経緯と注意点をまとめます。 🦀 Rspackとは？ Rustで書かれた高速なJavaScriptのバンドルツールです。 webpackエコシステムとの強力な互換性を持ちます。 2024/08/24にv1.0.0がリリースされました。 🤔 なぜRspackに移行したのか？ビルド速度改善... 続きを読む

webpack互換のRust製高速バンドラ「Rspack」が正式版となるバージョン1.0に到達。webpackより10倍高速と

2024/08/28 14 users Rspack 到達 The Next Generation

webpack互換のRust製高速バンドラ「Rspack」が正式版となるバージョン1.0に到達。webpackより10倍高速と webpack互換のRust製高速バンドラ「Rspack」が正式版となる「Rspack 1.0」としてリリースされました。 Announcing Rspack 1.0 - the next generation JavaScript bundler written in Rust, webpack compatible, 10x... 続きを読む

ESModules プラットフォームとエコシステムの狭間で | poteboy

2024/07/08 10 users ESModules 狭間 rollup プラットフォーム一定

一定の規模以上のWebアプリケーションにおいて、JavaScriptを開発時のままの形で配信することは滅多にありません。webpackやRollupなどのバンドラを使用して、ファイルをまとめた上で配信することが一般的です。 ESModulesが普及しバンドル工程なしでも主要ブラウザがJavaScriptのモジュールを直接解釈できるようにはな... 続きを読む

さよなら Webpack さん

2024/03/09 87 users

新卒時代に作った資料を加筆。続きを読む

JavaScriptランタイムのBun、インストール不要の実行ファイル生成が可能に。Webpackより200倍以上高速とするバンドラがβ版、Puppeteerにも対応

2023/06/05 64 users Bun サーバサイド puppeteer アプリケーション

JavaScriptランタイムのBun、インストール不要の実行ファイル生成が可能に。Webpackより200倍以上高速とするバンドラがβ版、Puppeteerにも対応サーバサイドで実行可能なJavaScriptランタイム「Bun」は、5月に登場したバージョン0.6で、Bunをインストールすることなく、配置することでアプリケーションを実行できる単独... 続きを読む

社内の静的アセット管理リポジトリのNode.jsのバージョンを上げたら動作が爆速になった話 - BASEプロダクトチームブログ

2023/03/06 11 users 爆速 node.js 動作 BASEプロダクトチームブログ

初めにこんにちは。フロントエンドエンジニアの竹本です。入社してそろそろ4ヶ月が経とうとしています。だいぶBASEの開発にも慣れてきました。この記事では私が社内の静的アセットを管理しているリポジトリ(以降は便宜上static-repositoryと呼びます)のNode.jsのバージョンを12から16にあげたら、webpack dev server... 続きを読む

Webpack から Vite に段階的に移行しました | PR TIMES 開発者ブログ

2023/02/08 6 users React vite yoiwamoto ビルド経緯

こんにちは。PR TIMES フロントエンドエンジニアの岩元 (@yoiwamoto) です。 PR TIMES ではいくつかのページが React で実装されており、Webpack でビルドを行っていました。今回は、一部のページを除いてこの Webpack を Vite へ置き換えたので、その経緯や結果を共有します。まとめビルド時間が長いことが課題で移... 続きを読む

Recoilとwebpack.DefinePluginと環境変数の名前 - 私が歌川です

2022/12/07 6 users Recoil アプリケーション環境変数ビルド時コード

これは React Advent Calendar 2022 7日目の記事です。 Recoilを使っているアプリケーションでWebpackのDefinePluginを使って環境変数の値をビルド時に埋め込むとき、Webpackの設定によっては環境変数の名前がビルドしたコードに含まれてしまう場合があります。具体的には、以下のようにDefinePluginの process.env キ... 続きを読む

Webpackの後継となる新バンドルツール「Turbopack」が登場。Rust製のネイティブアプリケーションでWebpackの700倍高速に。Next.js Conf 2022

2022/10/26 96 users ネイティブアプリケーション Vercel Reactベース

Webpackの後継となる新バンドルツール「Turbopack」が登場。Rust製のネイティブアプリケーションでWebpackの700倍高速に。Next.js Conf 2022 Reactベースのサーバサイドフレームワークとして知られるNext.jsの開発元のVercelは、日本時間10月25日深夜にイベント「Next.js Conf 2022」を開催。Next.jsの最新バージョンと... 続きを読む

レガシーなMPAアプリケーションをwebpackからviteに移行する話

2022/10/16 16 users vite

株式会社iCAREでは、Vue2.6(※2.7に移行中)+Composition APIで開発を行っており、vue2系では比較的モダンな構成です。一方、Ruby on RailsのView毎にVueインスタンスを生成するMPAであり、アプリケーション全体の構成としては、レガシーな構造になっています。エントリーポイントが多いことによる弊害で、サービス拡大に... 続きを読む

Vue3<script setup lang="ts">知見

2022/10/02 15 users lang script setup 知見 Vue3 ネット

続いて、TypeScriptが入っていなかったので入れたのですが、なかなか<script setup lang="ts">の知見がネットになかったのでここに軽く共有できたらと思います。前提 Vueは3.2系（<script setup>が使えるのは3.2系から） TypeScriptは4.5.5(vue-createするとこれが入る) webpacker... ts-loader 有用なドキュメント集 ... 続きを読む

RustのWasm周りのクレートまとめと、Trunkを使ってRustで書いたWasmをブラウザ上で簡単に実行する

2022/06/11 16 users trunk rust wasm npm wasm-pack

wasm-packを使うことで、ビルドしてwasm-bindgen-cliでさらに変換処理を行い、npmで配布可能なパッケージにするという多段階必要なビルド手順をまとめることが可能です。またnewコマンドのようなテンプレートから生成する機能などもあり、より手軽にWasmの実行を行えます。後述のTrunkとの違いは、wasm-packはwebpack... 続きを読む

いちばんやさしい webpack 入門

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

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

「The State of JS 2021」公開。最も使われているフロントエンドのライブラリはReact、バックエンドはExpress、ビルドツールはWebpackなど

2022/02/17 36 users ビルドツール React Express 国別分布ライブラリ

「The State of JS 2021」公開。最も使われているフロントエンドのライブラリはReact、バックエンドはExpress、ビルドツールはWebpackなど回答者の国別分布を上位5位までを見ると米国が14％、ドイツが4.8％、ロシアが4.5％、フランスが4.2％、イギリス（UK）が4％となっており、日本の回答者は1.3％で15位、中国の回答... 続きを読む

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

2022/01/29 338 users vite わしネーミング Vue.js エピソード

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

【Rome】RomeはJavaScriptをやめてRustにするってよ - Qiita

2021/09/27 17 users Qiita rust Rome Babel Jest

RomeはLinterでありCompilerでありBundlerでありFormatterでありTesterでありMinifierであり…… ともかく、フロントエンドの統合ツールチェーンです。これまでBabel、ESLint、webpack、Prettier、Jestなど様々なツールでバラバラに行っていた作業が、Romeひとつ使うだけで完結するようになるという、これまで何度再発明... 続きを読む

1枚岩なMPAプロダクトでWebpackのマルチエントリーをさらにグルーピングしてビルドする - メドピア開発者ブログ

2021/06/08 12 users 掲題小宮山事柄勢いフロントエンドグループ

Noita世界の理不尽をこの身をもって体験した末にバウンドルミナスで全てを切り刻んでクリアしました、フロントエンドグループの小宮山です。以前からこれできたらいいのになぁと思いながら無理そうと諦めていた掲題の事柄を実現できた嬉しさの勢いのままに書き始めています。状況 1枚岩なMPAプロダクトがどういうもの... 続きを読む

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

2021/05/05 117 users Publickey Rome Babel Inc eslint

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

webpack4系から5系にアップデートした際の対応事項とかメモ - Madogiwa Blog

2021/04/26 13 users メモアップ BUILD mode デフォルト

個人で開発しているサービスでフロントエンドのbuildにwebpackを利用しているのですが、4系から5系にアップデートしたので、そのあたりで対応したことをメモしておきます? 利用していたwebpackのビルド構成 webpackアップデート時の対応事項メモ modeを明示的に指定するようにしたデフォルトでinstallされなくなったNo... 続きを読む

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

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

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

webpack v5がリリースされたので、現状をまとめてみた

2020/10/27 7 users 現状 Loader Plugin Issue プロダクション

10/10 に webpack v5 がリリースされたので、今回は変更点や気をつけたい点をまとめてみました。プロダクションで使うのはまだ早いかも(2020/10/27時点) webpack v5 のリリースは行われたが、まだバグが多くあり、webpack で使用する loader や plugin は対応が追いついていません。パッとwebpack 5 関連の Issueを眺... 続きを読む

Webpack 5 release (2020-10-10) | webpack

2020/10/10 8 users 2020-10-1

Webpack 5 has been officially released. Read our announcement. Not ready yet? Read webpack 4 documentation here. webpack 4 was released in February 2018. Since then we shipped a lot of features without breaking changes. We know that people dislike major changes with breaking changes. Especially w... 続きを読む

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

2020/06/20 250 users Qiita React 先入観 TypeScript環境動機

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

開発ツールWebpackの公式サイト、警察官による黒人殺害事件への抗議でドキュメントを一時閲覧できなくする | スラドオープンソース

2020/06/08 5 users スラド抗議ドキュメント警察官オープンソース

WebサイトやWebアプリケーションで使われるJavaScriptファイルなどの各種アセットを変換・結合するオープンソースソフトウェアであるWebpackの公式ドキュメントサイトに、米国で発生した警察官による黒人殺害事件への抗議として一時的に抗議文が掲載されていたのだが、これによってWebpackのドキュメントが閲覧できなく... 続きを読む