目次
- Webpackとは
- Webpackを使用するメリット
- Webpackの使い方
今回の学習のゴール
- Webpackとは何か、何ができるかを知る
- 実際の使い方について知る
1. Webpackとは
- 複数のファイルを１つにまとめてくれるもの
- webpack - GitHubよると
webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.
- モジュールバンドラーとはモジュールをひとまとめにするツール
- CSSやJavaScript、画像などWebコンテンツを構成するあらゆるファイル(アセット)やリソースを変換したりパッケージ化したりすることができる
- モジュールバンドラーを使用するとJavaScriptコード内のrequireを辿って必要なファイルを連結してくれる
- requireはもともとNode.jsのモジュール化の仕組みであり、JavaScriptにはコードをモジュール化してそれを必要な際に呼び出して使用するような仕組みが存在しないが、モジュールバンドラーを使用すれば依存関係を解決しブラウザ上でも利用できるようになる
- コマンドラインツールで作成されたAngular、React、Vueのプロジェクトには標準採用されている
2. Webpackを使用するメリット
- 一般的にWebページは、HTMLやJavaScript、CSS、画像など、複数のファイルから構成され、ファイルの数が多くなると、構成ファイルの依存性を正しく管理することが難しくなるが、Webpackを使用すればWebページを構成するファイルの依存性を自動的に処理してまとめてくれる
- 依存関係が一目瞭然となるのでコードが読みやすくなる
- 保守性が高くなる
- コードを他プロジェクトに転用しやすくなる
- JavaScriptだけでなく、CSSや画像のファイルもバンドルできる
3. Webpackの使い方
- webpackをインストール
$ npm install --save-dev webpack
- package.jsonの設定
- npm run buildコマンドでwebpackが実行できるようになる
"scripts": {
"build": "webpack"
}
- webpackの設定ファイルwebpack.config.jsを作成
webpack.config.js
const path = require('path'); // 引数にモジュール名を指定しモジュールを読み込む pathはNode.jsに標準モジュール（ファイルやディレクトリのパスを操作できるようになる）
module.exports = {
entry: './path/to/my/entry/file.js', // エントリポイントを指定 エントリポイントは依存する他のモジュールとライブラリウィ把握する
output:{
path: path.resolve(__dirname, 'dist'), // path.resolve関数で絶対パスに変換 ルートディレクトリを表す__dirname（定数）の後に出力先を指定
filename: "bundle.js" // 出力するファイル名を指定
}
};
- webpackをnpmコマンドで実行
$ npm run build
webpack-dev-serverを使用した開発
-
webpack-dev-serverはwebpackで利用できる開発用のWebサーバー
- スクリプトを書き換えるたびにWebページを更新できるので効率よく開発することができる
-
webpack-dev-serverのインストール
$ npm install --save-dev webpack-dev-server
- サーバーを立ち上げる
$ webpack-dev-server
- package.jsonの設定
- npm run startコマンドでwebpackが実行できるようになる
"scripts": {
"start": "webpack-dev-server"
}
- webpack.config.jsにサーバーの設定を記述
devserver/webpack.config.js
module.exports = {
//...
devServer: {
open: true, // 起動時にブラウザーを開く
contentBase: path.join(__dirname, 'dist'), // バンドルファイルの出力先と同一にする サーバの起点となる
port: 3000 // ポート番号 省略した場合8080
}
}
- webpack-dev-serverを実行
$ npm run start