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

jQuery modalダイアログについて&重複時間処理

Contents1 jqueryモーダルダイアログ1.1 あらかじめ読み込むライブラリ1.2 ソース本体1.2.1 Html側1.2.2 Javascript側1.2.3 参考リンク2 重複時間につい …

no image

vueに関する小ネタ(computed、v-classなど)

先日は埋め込み形式で、vueを書いてましたが、その時に新たな気づいた小ネタなど。 Contents1 computed2 v-class3 ajaxのasync:false computed 主に、v …

no image

ケース別JavaScriptライブラリまとめ

Webエンジニアとしてはサーバーサイドのプログラムのみならず、JavaScriptをいじることがおおいでしょう。 私自身、昔はわけがわからず大嫌いだったんですが、最近はデバッグが楽なこともあり、結構愛 …

no image

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

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

no image

dataTableによる無限スクロール

Angularで無限スクロールをやったので一般のjqueryで。 dataTablesというプラグインです。 以前下記リンクで紹介していますが、ようわかっとらんかったんで(汗)再度書きます。 ページャ …

アーカイブ