webpackについて今まで見よう見まねでやってきましたが、おまじないのような感じでプロパティ内部までしっかり理解しているとは言い難いため、再履修です。インストールとかは省略。
よくまとまっている記事(これらみとけばいらないかも(爆))
Contents
webpackとは?
ファイルの依存関係を解消し、JavaScriptを一つにまとめ上げることのできるモジュールバンドラ。コンパイラと覚えるのが一番わかりやすい。
できること、メリット
様々なライブラリの読み込み。ここでコンパイルしてbundle.jsなどと設定しておけばページごとに読み込まなくていいので楽です。
実際のコンパイル
もっとも簡単な書き方としては下記の書き方でコンパイルができます。
開発時、本番時などで設定を分けて書くのが一般的のようで--mode developmentをつけましょう。(つけないとエラー出ました)
|
1 |
npx webpack --mode development 元ファイル --output 生成後のファイル |
が、これだとオプションが色々増えた時に限界があるため、通常は様々な設定をwebpack.config.jsなどに書いておき(ファイル名は任意でOK)、下記コマンドでコンパイルします。
|
1 2 |
npx webpack --mode development --config ./webpack.config.js (設定ファイル見えは敢えて書いているがなければ自動的にwebpack.config.jsをみにいきます。) |
設定ファイルに関して
webpack.config.jsなどにmodule.exportsメソッドを記述して、設定を読み込むことが一般的です。
|
1 2 3 4 5 6 |
module.exports ={ entry:'・・・・・', output:{ filename:'・・・・' } } |
各プロパティについて
entry
これは最低限必須でしょう。読み込むファイルの元です。
output
これまたほとんど必須かと思いますが、生成ファイルです。
module
- どういう条件に対してのファイルに対して
- どのloaderを使うのか
- オプション的な設定はないのか
で設定します。
下記の例では
- jsというファイルに対して(testプロパティ)
*なおここでは書いてませんが除外のプロパティもあります。(exclude) - babel-loaderを実行(useプロパティ)
- optionとして、presetsを設定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
module.export={ 'entryなどは省略' modules:[ rules:[ test: /\.js$/, use:{ loader:'babel-loader', options:[ presets:['@babel/preset-env'] ] } ] ] } |
他にもpluginなどのプロパティがありますが、私があまり理解してないので省略します。
*babelについて
JavaScriptの変換(トランスパイル)のライブラリです。
[…] webpackについて再履修 […]