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

AngularJS テーブル行のソート入れ替え&ドラック&ドロップ

受注伝票みたいなものを作ると伝票の登録画面はヘッダーと明細に分かれますね。 私が携わったプロジェクトでは、大体一画面でヘッダー情報と明細情報を入力することが一般的でした。 今回AngularJSでその …

no image

ECMAScriptについて復習

ここ数年のJavaScript界隈は進化が激しく、私の知識はレガシーな状態で止まっているので、自分に備忘録として整理しておこうと思います。 Contents1 ECMAScriptとは?2 ECMAS …

no image

Vue.jsについて

次の現場で使うかもしれない技術ということでvue.jsをちょこちょこっと勉強。とっていっても1時間ぐらいしか勉強しておらずイントロだけですが・・ Contents1 vue.jsとは?2 ソース3 参 …

no image

JavaScriptライブラリ sugar

去年、JavaScriptの仕事をがりがりやった時にお世話になったライブラリsugar。 JavaScriptのライブラリというとunderscore.jsが有名ですが、こいつも結構使えるライブラリで …

no image

bowerのインストール

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