React学習 Webpackその１

#Webpackとは
Webpackとは、JavaScriptやCSSなどのソースファイルを1つにまとめたり、JSXのような特殊な記法のファイルを変換するツールです。
ソースファイルをまとめることで、ウェブページのHTTPリクエストの数を減らしたり、高度なウェブアプリケーションの開発に利用できます。

#環境構築

ディレクトリ作成

mkdir webpacktest

ディレクトリ移動

cd webpacktest

npmの初期化

npm init -y

webpackのインストール
・webpack： webpack本体
・webpack-cli： コマンドライン操作用

npm i -D webpack webpack-cli

起点となるソースファイル配置

/src/index.js

import {mul} from './mul'
const result = mul(5, 6)
console.log(result)

/src/mul.js

export function mul (a, b) {
  return a * b
}

webpackを実行し、ファイルをまとめ上げる
特にwebpackの設定を行っていない場合は、デフォルトの起点となるディレクトリとファイル名は**/src/index.jsであり、出力されるディレクトリとファイル名は/dist/main.js**となります。
この状態だと設定は行っていないので、WARNING in configurationが発生します。

npx webpack 

#設定構築
実行はできましたが、このままだとまともに使えないので、各設定を行っていきます。

##npmからの実行
まずは、npmからビルドできるようにpackage.jsonを修正します。

package.json

{
  "name": "webpacktest",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
   //buildの追加
   "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1"
  }
}

これにより以下のコマンドでビルドの実行が行えます。

npm run build

##webpackの設定ファイル作成
変換元のファイル名等の設定を行うには、設定用のファイルを作成します。
ファイル名はwebpack.config.jsです。

・entry: 変換元パス
・output： filename=変換先ファイル名、path=変換先のファイルを配置するパス

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'out')
  }
};

また、modeという設定もあり、開発用のdevelopmentとソースを変換する際に最適化を行うproductionがあります。
以下のように設定することで、ビルド時に反映されます。

webpack.config.js

const path = require('path');

module.exports = {
  //modeオプションの追加
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'out')
  }
};

ただ、毎回modeを書き換えるのは大変なため、package.jsonにmodeを記述します。

webpack.config.js

const path = require('path');

module.exports = ( env, argv ) => ({
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'out')
  }
});

package.json

{
  "name": "webpacktest",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    //本番用ビルドコマンド
    "build": "webpack --mode=production",
    //開発用ビルドコマンド
    "build-dev": "webpack --mode=development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12"
  }
}

これにより、以下のコマンドでmode切り替えが可能となります。

本番用

npm run build

開発用

npm run build-dev

##ファイル監視
ファイルを編集する度に、手動でビルドし直すのは大変なので、ファイルを監視し自動的に変換を行ってくれるように設定します。
以下のどれか設定することで監視が可能となります。

①webpack.config.jsで設定する場合

webpack.config.js

const path = require('path');

module.exports = ( env, argv ) => ({
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'out')
  },
  //watchの追加
  watch: true
});

②package.jsonで設定する場合

package.json

{
  "name": "webpacktest",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "build": "webpack --mode=production",
    //watchオプション追加
    "build-dev": "webpack --mode=development --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12"
  }
}

③専用の開発用webサーバで監視する場合

webpack-dev-serverパッケージをインストール

npm i -D webpack-dev-server

webpack.config.jsの編集

const path = require('path');

module.exports = ( env, argv ) => ({
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'out')
  },
  //devServerの追加
  devServer: {
    //ドキュメントルート設定
    contentBase: path.resolve(__dirname, 'out'),
    //監視モード設定
    watchContentBase: true,
    //ポート設定
    port: 3000
  }
});