Hatena Blog Tags
はてなブログ トップ
webpack
このタグでブログを書く
言葉の解説
ネットで話題
関連ブログ

webpack

このタグの解説についてこの解説文は、すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、お問い合わせフォームよりご連絡ください。
FURYU Tech Blog - フリュー株式会社•2ヶ月前

コスパ良くフロントエンドビルド改善: webpackからRspackへの移行事例

TL;DR webpack→Rspackに移行した ビルド時間が約63%短縮された 基本的に互換性のある置き換えを選択、差分を減らす方針にした はじめに こんにちは、フリューのソフトウェアエンジニアkitajimaです。ピクトリンクの開発を担当しています。今回は自社プロダクトについて、webpackからRspackに移行したことでフロントエンドビルド時間が大幅に短縮した事例を紹介します。 TL;DR はじめに 対象のプロダクトについて 課題 既存のビルド構成 Rspackとは 選定理由 背景: 本プロダクトは将来的に廃止予定 そんな中Rspackが浮かび上がってきた 移行作業 作業のポイント …

#フロントエンド#Rspack#webpack

関連ブログ

KENTEM TechBlog•4ヶ月前

フロントエンドのビルドツールについて

この記事は、 KENTEM TechBlog アドベントカレンダー2025 16日目、12月16日の記事です。 こんにちは、フロントエンド開発のY.O.です。 フロントエンドの業務に携わるようになって4年目になりますが、なんとなくの理解で日々の開発をやり過ごしているものの一つにビルドツールがあります。 フロントエンドのビルドツールは種類がたくさんあり、複雑で混乱しがちですよね。 そこで今回は私の認識の整理や備忘録も兼ねてフロントエンドのビルドツールについて書かせていただきます。 正直この話は類似のもっと良くまとまった記事がたくさんあり、内容もほぼほぼ被っています。 自分の理解のために書くので、…

#アドベントカレンダー#Webフロントエンド#Vite#webpack#esbuild#SWC
かもメモ•1年前

😇 Webpack production のビルド時に Maximum call stack size exceeded エラーが発生する

Webpack を使って SCSS をコンパイルしているプロジェクトで久々に build したら下記のようなエラーが発生した $ npx webpack --config ./webpack.config.js --mode production … webpack-fix-style-only-entries: removing js from style only module: js/css.js (node:53965) [DEP_WEBPACK_CHUNK_HAS_ENTRY_MODULE] DeprecationWarning: Chunk.hasEntryModule: Use …

#webpack
Web開発における知見共有系ページ•2年前

Reactのソースコードを隠蔽して公開する方法

Reactでソースコードを隠蔽 Reactでソースコードを隠蔽 Reactでソースコードを隠蔽する方法はいくつかあります。 主な方法としては、以下のようなものがあります：1. コードの最適化と圧縮: ソースコードを最適化して、不要なコメントや空白を削除し、変数名を短縮することで、読みにくくします。 これにより、他の人がソースコードを理解するのが難しくなります。2. Webpackやバンドルツールの利用: Webpackなどのバンドルツールを使用して、ソースコードを1つのファイルにまとめ、ビルドする際に最適化することができます。 これにより、元のソースコードを見ることなく、ビルドされたコードのみ…

#バンドル#隠蔽#暗号化
日々ブログ•2年前

【プログラミングのお話】viteでbuffer をインポートできないときの対処法

過去に、viteでelectronを使用していたときに困ったので、メモ代わりに記載しておきます。 viteではbufferをインポートできない webpackではインポートできる 拡張プラグインをインストールすることでimport エラーが解消する 失敗事例：browserlifyをかける メモ：browserlifyの使い方 viteではbufferをインポートできない javascript上では、import と書いてあるのですが、requireをサポートしていないというエラーが出ています。requireがbufferの内部で使われていることによるエラーですね。 webpackではインポー…

#browserlify#webpack
Web開発における知見共有系ページ•2年前

webpackの処理の流れと実装例

webpackの処理の流れ 上記を踏まえた実装例 SCSSを使用する場合 Typescriptを使用する場合 webpackの処理の流れ Webpackは、JavaScriptアプリケーションのためのモジュールバンドラーであり、アプリケーションに必要なすべてのモジュールを取り込み、それらを1つまたは複数のバンドルにまとめます。 一般的なWebpackの処理の流れは以下の通りです：1. エントリーポイントの指定: webpackの最初のステップは、アプリケーションのエントリーポイントを特定することです。 通常、このエントリーポイントは、アプリケーションのメインファイルであり、依存関係のチェーンを…

#Java#npm#webpack#SCSS
Linkers Tech Blog•2年前

webpackのSplitChunksでビルドを3倍速に

はじめに こんにちは、情報システム部の呉です。 あっという間に、2023年の終わりが近づいてきました。今年はLinkers Sourcing / Marketing (LS/LM)ではシステムの様々な内部改善を行いました。 その一環としてwebpackのパフォーマンスを改善しましたので、今回は共有させて頂きたいと思います。 問題の発覚 きっかけは今年行ったCoffeeScriptの撤廃作業でした。撤廃作業はあくまで内部改善なので、並行している他の開発タスクと競合しないように、ファイルもしくは機能毎に分割し、サイドミッションの形で段階的に進めていました。 作業はほぼ問題なくスムーズにできていまし…

#webpack
くらしのマーケット開発ブログ•2年前

バンドルファイルのサイズを50%軽量化した話

こんにちは、みんなのマーケットでエンジニアをしているきたがわです。 今回はくらしのマーケット内で読み込まれるバンドルファイルを軽量化した話について紹介いたします。 ぜひご覧ください！ 発表資料 speakerdeck.com

#webpack#Angular
日々ブログ•2年前

【プログラミング】webpackが開発終了と聞いたので後釜探し

Node.jsがDenoに変わったりと最近、web界隈を支えてきたコア技術の入れ替わりが多い気がしますね。 一部界隈で、OSSの時代は終わったみたいな声がささやかれてますがその影響だったりするんだろうか。 もともと、OSSって自身のスキルを示すために開発している節があったので、そうした取り組みが破綻し始めてると考えると、web界隈の人気もしばらく低迷しそう。 webpackが開発終了 Internet Explorerへの対応する役割を完遂 webpackの開発者はturbopackへ 公式githubはまだまだ稼働していそう turbopack vs viteの争いへ 速度重視ならturbo…

#react#webpack#開発終了
株式会社ヘンリー エンジニアブログ•3年前

StorybookをReact以外のプロジェクトでも使いたい！

はじめまして。今月から株式会社ヘンリーのフロントエンドエンジニアをしている kobayang です。この記事では Storybook を React や Vue などの UI ライブラリを使っていないプロジェクトでも活用できるかも、という話をしていこうと思います。 Storybook storybook.js.org もはや説明不要な気がしますが、Storybook は UI を実装する上で便利な、UI プレビューのためのライブラリです。また、プレビューだけでなく、Jest から Story を呼び出すことで簡単にテストが書けたり、Chromatic と連携することで、VRT ができるようにな…

#Storybook#webpack#Handlebars