webpack-bundle-analyzer から始めるフロントエンドのパフォーマンス改善入門 - Qiita
はじめに この記事では、 webpack-bundle-analyzer で不要なパッケージを探して削除する方法を紹介します。 CyberAgent が過去に開催した Web パフォーマンス改善のコンテストのリポジトリ に対して試しに導入し、パフォーマンスの改善を試みます。 対象読者 本記事の対象読者は以下を想定しています。 webpack-bundle-analyzer のインストール方法が知りたい フロントエンドが書けるようになってきたので、そろそろ webpack にも入門したい フロントエンドのパフォーマンス改善をしたいけど、何をやったらいいかわからない Web パフォーマンス改善のコンテストに参加することになったので付け焼き刃が欲しい webpack-bundle-analyzer とは？ webpack-bundle-analyzer は webpackによってバンドルされたフ
バンドル・コンパイルについて - Qiita
はじめに これまで、なんとなくにしてきたバンドル、コンパイルについて理解したいと思い記事を書きます。 モジュール化 バンドルについて理解する前に、モジュールについて知る必要があります。 モジュールとは機能ごとに分割されたファイルのこと。 変数や関数が書かれたプログラムのことで、基本的には1ファイルのことをモジュールと呼びます。 元々JavaScriptはブラウザ上で動かすために生まれた言語のため、モジュール定義や読み込みがありませんでした。 モジュール化して開発を効率的にしたいよねーということで、誕生したのがCommonJSです。 CommonJS (require構文）
importのパスにエイリアスを指定する方法 - Qiita
はじめに プロジェクトが大きくなると、コードが多くなり、階層構造も複雑になるため、パス指定が複雑になってしまいます。
【Webpack】webpack.config.jsの内容がいまいちわからない方々へ - Qiita
はじめに Webpackは、JavaScript, CSS, JPGなどのリソースを一つのjsファイルにバンドルする(まとめる)ツールです。 バンドルすることで、各リソースの依存関係を気にする必要がなくなり、不適切な順序でファイルが実行されるような心配がなくなります。 モダンなJS開発でほぼ必須のWebpackですが、設定ファイルwebpack.config.jsの中身についていまいちよくわかっていませんでした。 設定ファイルを自由にカスタムできるようになれば開発の幅も広がる気がしたので、以下の基本項目について学びなおしました。 Entry & Output Asset Modules Loaders Plugins Mode Entry & Output バンドル設定の手始めとして、entryに入力ファイルのエントリーポイント、outputにバンドル後の出力ファイル名filenameと作
Webpackでライブラリを作る - Qiita
npmには多数のライブラリが存在しますが、自分でライブラリを作ろうとしたところ、正しい設定にたどり着くまでにちょっと手間取りました。 ライブラリの特徴 ブラウザやNode向けのプロジェクトの場合、ビルドした後は読み込んで使うだけなので、外部との関係性を考える必要はそこまで大きくありません。一方で、ライブラリの場合は、 ライブラリを読み込む側との連携（CommonJS、ES6 Module、AMD、UMD） ライブラリ内で使うライブラリの切り離し（そのままにすると、他のライブラリを取り込む形となってしまい、あとで依存ライブラリを差し替えることができなくなる） といった処理が必要となります。ただ、これらはWebpackでも実現できます。 ライブラリモードの利用（&エクスポート） まず、Webpackをライブラリのビルドに使いたい場合、output.libraryに名前を指定します。この名前は、
最新版で学ぶwebpack 5入門 - JavaScriptのモジュールバンドラ - ICS MEDIA
webpack（ウェブパック）とはJSファイルをまとめる高機能なモジュールバンドラー。まとめることでウェブページのHTTPリクエストの数を減らしたり、高度なウェブアプリケーションの開発に役立ちます。 連載ではTypeScriptやBabelなどのES2015+の環境構築、ReactなどのJSライブラリの設定方法を網羅。サンプルファイルで詳しく解説します。 webpackの入門記事は他のサイトにもありますが、対象バージョンが古くて使えなかったりします。検索結果の上位の野良記事を参照にしたら古いバージョンの内容ばかり。解説記事通りにやったのにうまく動かない･･･なんて困った方も多いのではないでしょうか。本記事は常に最新版に対応させているので、安心して読み進めてください。 ※本記事では2023年3月現在のwebpack 5（2020年10月リリース）以上で解説しています。 本記事で解説しているこ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Can't import the named export from non EcmaScript module (only default export is available) · Issue #675 · vuejs/pinia