Hatena Blog Tags
はてなブログ トップ
webpack
このタグでブログを書く

webpack

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

😇 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開発における知見共有系ページ•1年前

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

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

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

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

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

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

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#開発終了
株式会社ヘンリー エンジニアブログ•2年前

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

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

#Storybook#webpack#Handlebars
つまづき日記•2年前

angular16にしたら@angular-builders/custom-webpackが動かなくなった話

angular16にアップデートしたら@angular-builders/custom-webpackに互換性がなくなり困り果てていました しかし、ついにベータ版ですが@angular-builders/custom-webpack@16.0.0がリリースされましたね！ 早速アップデート npm install --save-dev @angular-builders/custom-webpack@16.0.0-beta.0 angular.jsonまたはproject.jsonを書き換えましょう ‘‘‘ts "build": { "executor": "@angular-builders/…

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

フロントエンドのバンドルの仕組み

フロントエンドのバンドルとは モジュールバンドラーとは？ トランスパイルとは？ Typescriptをトランスパイルする場合の例 フロントエンドのバンドルとは フロントエンドのバンドルとは、プロジェクト内にある複数のJavaScriptファイルやCSSファイルを1つのファイルにまとめることを指します。 これにより、Webページのロード時間を短縮することができ、ユーザー体験を向上させることができます。 また、読み込むファイルを1つにすることで、読み込み処理の記述の煩雑さを防ぐことができます。バンドルは、通常、モジュールバンドラー(後述)と呼ばれる特殊なソフトウェアを使用して作成されます。 モジュ…

#フロントエンド#バンドル#トランスパイル#webpack#tsconfig#バンドラー