webpack -- 基本的な設定の使い方

module.exports = {
 mode: 'production', //  
 entry: './src/index.js', // 注意: エントリを書かない場合、デフォルトは./src/index.js
 output: './dist/bundle.js', // 注意：出力を書かない場合、デフォルトは./src/main.js
 module:{ // Loader  
 rules: []
 },
 plugins: [] // プラグインの設定
}

entry --

1.webpack entry」の公式説明は以下の通り。: エントリーポイントは、webpackが内部の「依存関係グラフ」を構築するための出発点として、どのモジュールを使うべきかを示す。
エントリーポイントに入ると、webpackはそのエントリーポイントが依存しているモジュールやライブラリを調べる
2.'entry'を理解する最も簡単な方法は、webpackのパッケージングエントリーポイントを指定するために使われるということだ。
3.公式の図を理解するために、図の左側には、指定されたエントリーポイントを渡すエントリーポイントパッケージングと、イメージやフォントの依存関係などのコードと非コードも常に使われている。
依存関係グラフに追加する

エントリー 単一ページアプリケーションと複数ページの設定

1.エントリーポイントを指定する
 1.1.シングルエントリーの項目は、例えば文字列である：
 module.exports = {
 entry: './path/to/my/entry/file.js'
 };
 1.2.複数エントリは、例えばオブジェクトの設定である：
 entry: {
 app:'./src/app.js',
 adminApp:'./src/adminAPP.JS'
 }

outPut --

1.output 属性は webpack が作成するバンドルの出力先とファイル名を指定する。

シングルエントリー設定

module.exports = {
 entry: './src/index.js', // 注意: エントリを書かない場合、デフォルトは./src/index.js
 output: './dist/bundle.js', // 注意：出力を書かない場合、デフォルトは./dist/main.js
}

複数エントリーの設定

1.output'、'filename'フィールドに関する注意: パックするエントリーが複数ある場合、出力も複数になる。
修正した、エラーが出る。
'これを修正したいのであれば、パッケージ化されたファイルを出力したいのだから、実際には1ページで作業しているのだから、複数ページ用に設定する必要はないはずだ'と理解すればいい。
2."filename: '[name].js' ",ここでの名前は、entryオブジェクトのキーに対応している。

module.exports = {
 entry: {
 index: './src/index.js',
 sreach: './src/hellowWebpack.js'
 },
 output: {
 path: path.join(__dirname, 'dist'),
 filename: '[name].js' // このようにプレースホルダを使うことで、ファイル名を一意にすることができる。
 },
}

出力に関する質問

1.output なぜパスを使う必要があるのか？.resolve(__dirname, 'xxx') これは、相対ディレクトリを'./dist/' とは何が違うのか？
A: 出力パラメータのパスは、相対パスではなく絶対パスでなければならない。

• 図のように

1.相対パスを書くとエラーになる
output: {
 path:'../dist' , //path.join(__dirname, 'dist')
 filename: 'bundle.js'
}

Loaders

1.loader ローダーはあらゆる種類のファイルを 
webpack 処理可能な有効なモジュールを用意し、webpackのパッケージング機能を活用して処理できるようにする。
2.ここでは、'webpack'はjsとjsonにしかアウトオブボックスで対応していないので、'ts'や'images'など、いくつかの特殊なモジュールをサポートするためには、'webpack'がこれらのいずれにも対応していないことに注意する必要がある、という説明がある。
loader」を使って他のファイルタイプをサポートし、依存グラフに追加できる有効なモジュールに変換できる。
3.'loader' webpackの設定でローダーを定義するときは、モジュールで定義する」を使う.rules の','には、testとuse'という2つの必須属性が含まれている。
 3.1.test 属性は、対応するローダーによって変換されるべきファイルまたは複数のファイルを識別する。
 3.2.use 属性で、どのローダーを使って変換を行うべきかを示す。

loaders

const config = {
 output: {
 filename: 'my-first-webpack.bundle.js'
 },
 module: {
 rules: [
 { test: /\.txt$/, use: 'raw-loader' }
 ]
 }
};

GeekTime "Playing with webpack "コースより引用 - このような一般的なローダーは何ですか？

ローダーに関する質問

1.less ファイルはless-loaderによって以下のように処理される。 .css ファイルを読み込んだ後もcss-loaderを経由するのか？?
A: そうだね。 それぞれのローダーは一般的に一つのことをする。例えばlessを解析するには、lessをcssに変換する必要があるが、これはless-loaderによって処理される。，
cssが処理された後だが、webpackはcssファイルを認識しないので、cssをcommonjsオブジェクトに変換してjsに入れるcss-loaderがまだ必要。，
最終的にページがレンダリングされたときにスタイルを表示するには、style-loaderかMiniCssExtractPluginを使う必要がある。.loader htmlにcssを挿入する
 style または外部cssをリンクする
'各ローダーは関数であり、この処理をパイプラインと考えることができる。

plugins --

1.プラグインは、ビルドプロセス全体を通して、バンドルファイルの最適化、リソース管理、環境変数インジェクションに使用される。
2.使い方はpluginsフィールドに入れ、配列にする。 プラグインを使うには、require()してplugins配列に追加すればいい。
ほとんどのプラグインはオプションでカスタマイズできる。また、1つのプロファイルで同じプラグインを複数回、目的に応じて使い分けることもできる，
new演算子でインスタンスを作る必要がある。

www.webpackjs.com/plugins/

仕組み

const HtmlWebpackPlugin = require('html-webpack-plugin'); // npm経由でのインストール
const webpack = require('webpack'); // 組み込みプラグインにアクセスする
const config = {
 module: {
 rules: [
 { test: /\.txt$/, use: 'raw-loader' }
 ]
 },
 plugins: [
 new HtmlWebpackPlugin({template: './src/index.html'}) // プラグインを設定する
 ]
};
module.exports = config;

mode --

1.Mode 現在のビルド環境を指定するのに使う：'production'、'development'、'none'、デフォルトは'production'。

利用方法

module.exports = {
 mode: 'production', //  
 entry: './src/index.js', // 注意: エントリを書かない場合、デフォルトは./src/index.js
 output: './dist/bundle.js', // 注意：出力を書かない場合、デフォルトは./src/main.js
 module:{ // Loader  
 rules: []
 },
 plugins: [] // プラグインの設定
}

• 引用元: GeekTime「webpackで遊ぶ」レッスンRitu - モード組み込み機能