webpackについて再履修

投稿日：2018年9月29日

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

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

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

webpackのメモ

Contents

1 webpackとは?
2 できること、メリット
3 実際のコンパイル
4 設定ファイルに関して
- 4.1 各プロパティについて

webpackとは?

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

できること、メリット

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

実際のコンパイル

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

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

npx webpack --mode development 元ファイル --output 生成後のファイル

1	npx webpack --mode development 元ファイル --output 生成後のファイル

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

npx webpack   --mode development  --config ./webpack.config.js 
(設定ファイル見えは敢えて書いているがなければ自動的にwebpack.config.jsをみにいきます。)

1 2	npx webpack --mode development --config ./webpack.config.js (設定ファイル見えは敢えて書いているがなければ自動的にwebpack.config.jsをみにいきます。)

設定ファイルに関して

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

module.exports ={
    entry:'・・・・・',
    output:{
       filename:'・・・・'
    }
}

module.exports ={

entry:'・・・・・',

output:{

filename:'・・・・'

}

各プロパティについて

entry

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

output

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

module

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

で設定します。

下記の例では

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

module.export={
　　　　　　　　　'entryなどは省略'
     modules:[
        rules:[
           test: /\.js$/,
           use:{
               loader:'babel-loader',
               options:[
                   presets:['@babel/preset-env']
               ]
           } 
       ]

    ]

}

module.export={

　　　　　　　　　'entryなどは省略'

modules:[

rules:[

test: /\.js$/,

use:{

loader:'babel-loader',

options:[

presets:['@babel/preset-env']

]

}

]

}

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

*babelについて

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

Babelの使い方入門編｜ES6をコンパイル（JavaScript）