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
-,

執筆者:


  1. […] webpackについて再履修 […]

comment

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

関連記事

no image

無限スクロールプラグイン infinite scroll

無限スクロールのプラグインについていろいろ調べてきましたが、今回はテーブル形式でなく、通常の無限スクロールができるもの(イメージとしてはtwitterっぽい遷移。) infinte scroollとい …

no image

JavaScriptのexport

JavaScriptのexportについて。 es6の大きなメリットとして、ライブラリをモジュール化して、外部から読み込むことができますが、読み込み方に少し癖があります。 気をつけるポイントとしては、 …

no image

jQuery子要素の取得方法など

jQueryで要素を取得する方法って$(“セレクタ”)しか知らなかったんですが、他にもいろいろあることがわかったのでちょっと紹介。 例えばtrの列の中に横1列に<inpu …

no image

クリック編集のjQuery

最近のWEBサービスだと表示の画面と編集画面が同じになっていて、一見表示なんだけど、クリックすると特定の項目は編集できる、そんな画面がふえていきていますよね。 先日社内アプリをつくっていたところ、そう …

no image

JavaScriptのthisについて

今回はJavaScriptのthisについて。 JavaScriptのthisの場合、呼び出し方によってthisの参照先が変わります。 4種類あるとされていますが、使われ方で分類すると私の場合、下記の …