skillup

技術ブログ

JavaScript

webpackについて再履修

投稿日:

webpackについて今まで見よう見まねでやってきましたが、おまじないのような感じでプロパティ内部までしっかり理解しているとは言い難いため、再履修です。インストールとかは省略。

今まで書いた既存のwebpackがらみの記事

よくまとまっている記事(これらみとけばいらないかも(爆))

webpackのメモ

webpackとは?

ファイルの依存関係を解消し、JavaScriptを一つにまとめ上げることのできるモジュールバンドラ。コンパイラと覚えるのが一番わかりやすい。

できること、メリット

様々なライブラリの読み込み。ここでコンパイルしてbundle.jsなどと設定しておけばページごとに読み込まなくていいので楽です。

実際のコンパイル

もっとも簡単な書き方としては下記の書き方でコンパイルができます。

開発時、本番時などで設定を分けて書くのが一般的のようで--mode developmentをつけましょう。(つけないとエラー出ました)

が、これだとオプションが色々増えた時に限界があるため、通常は様々な設定をwebpack.config.jsなどに書いておき(ファイル名は任意でOK)、下記コマンドでコンパイルします。

設定ファイルに関して

webpack.config.jsなどにmodule.exportsメソッドを記述して、設定を読み込むことが一般的です。

各プロパティについて

entry

これは最低限必須でしょう。読み込むファイルの元です。

output

これまたほとんど必須かと思いますが、生成ファイルです。

module
  • どういう条件に対してのファイルに対して
  • どのloaderを使うのか
  • オプション的な設定はないのか

で設定します。

下記の例では

  • jsというファイルに対して(testプロパティ)
    *なおここでは書いてませんが除外のプロパティもあります。(exclude)
  • babel-loaderを実行(useプロパティ)
  • optionとして、presetsを設定

他にもpluginなどのプロパティがありますが、私があまり理解してないので省略します。

*babelについて

JavaScriptの変換(トランスパイル)のライブラリです。

Babelの使い方入門編|ES6をコンパイル(JavaScript)

-JavaScript
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

bowerのインストール

業務でAngularJSをいじっていますが、そこでbowerというソフトウェアの存在を知りました。 Contents1 bowerとは?2 インストール方法 bowerとは? フロントエンドのパッケー …

no image

formのシリアライズ+return falseなど

ajaxでformの値を投稿しようとするとき、一つ一つの要素をjQueryでとっていたのですが、項目が多いとなかなか手間です。 そんな時、下記のメソッドで一気にフォーム要素を取得して投げることができま …

no image

GoogleMapのカスタマイズ

GoogleMapの埋め込みってよくある要件だと思うのですが、先日、GoogleMapに色(企業カラー)をつけたいという要望がありました。 てっきり埋め込み1行で解決すると思いましたが、色々と調べるこ …

no image

npmでのJSライブラリインストール&ビルド(※Laravel使用時)

JavaScriptのインストールですが、いままではライブラリを1つ1つインストールしてました。 bowerでインストールしたこともあったんですが、読み込み自体は1つ1つしていました。 先日仕事でnp …

no image

AngularJSでのDB接続

AngularJSでデータベースへのアクセスをしたいときの処理を記述します。 注意点としては、なんといっても非同期なことです。同期させることも無理ではないようですが、基本非同期ですので、この点を理解し …