ProgText – プログラミング学習のWeb教材

このサイトは、プログラミングの基本的なことから、Webアプリ開発の学習や制作の手助けになるような情報を紹介しています。

webpack

webpack

webpackは、Node.jsのモジュールバンドラーです。

特に、Node.jsを利用して作成したスクリプトをブラウザで動作させるのに必要となります。まずはよく利用する設定を知っていきましょう。

webpack教材ページアイコン
webpackの役割を知って導入しよう
webpackの役割を知って導入しよう
Webpackとは、Javascriptモジュールハンドラーです。これだけでは何のことかわからないと思うので、解説していきます。 役割 Webp…
webpackでビルドしてみよう
webpackでビルドしてみよう
早速, Webpackを使ってビルドしていきましょう! 構成の準備 ファイル位置 まずは、元となるソースが入っている場所と、出力場所を分けましょ…
【webpack】 ファイル更新時に自動でビルドする
【webpack】 ファイル更新時に自動でビルドする
前回は`npm run dev`を紹介しました。しかし、ちょっと更新するたびにビルドを手動で走らせるのは面倒です。そこで、自動でビルドされるよう…
【webpack】 entryとoutputの設定を把握しよう
【webpack】 entryとoutputの設定を把握しよう
srcディレクトリの場所が違う、異なる名前でjsを出力したい、複数のエントリーを作りたいといった設定を紹介します。 エントリーや出力の参照先を変…
【webpack】 loaderを使って様々なファイルをビルドする (基本編)
【webpack】 loaderを使って様々なファイルをビルドする (基本編)
Webpackは、Javascriptだけでなく、scssやsassなどをモジュールとしてバンドルするなど、様々なビルドが可能です。ここではよく…
【webpack】 useの書き方の種類
【webpack】 useの書き方の種類
webpackのrulesでローダーを利用する場合はuse内に書きますが、このuseには書き方に種類があります。 省略しない書き方 フルで書くと…
【webpack】 拡張子を省略したり、パスに別名を設定しよう
【webpack】 拡張子を省略したり、パスに別名を設定しよう
例えば、vueファイルを読み込むときは`import App from "app.vue";`のように書きますが、毎回`.vue`を付けるのは面…