どうも、ディベロッパーの羽田です。
最近業務でモダンJSフレームワークやwebpackを使うことが多くなってきたので開発環境の構築手順をまとめてみます。
概要
ウェブ開発のデファクトスタンダードとなりつつあるWebpackとモダンJSフレームワークを使用したフロント開発環境構築の手順をまとめました。
自分用のメモも兼ねてるので雑な部分や端折ったりしてる部分があります。
対象者
- ある程度JSの知識がある人
- モダンJSフレームワークに興味がある人
- Webpackを使用した開発環境構築に興味ある人
章節
- 【基本構築編】
- 【Webpack & Babel編】←イマココ
- 【css & sass編】(執筆中)
- 【React & React Router編】(執筆中)
- 【Redux編】(執筆中)
Webpack周辺を構築
パッケージ名 | 説明 |
---|---|
webpack | 複数のファイルを1つにバンドルして出力してくれるツール。JSファイルを起点にローダーを読み込ませることであらゆるファイルをバンドルできる。 |
webpack-cli | コマンドラインでwebpackを実行するために必要なパッケージ。 |
webpack-dev-server | webpackを使用した開発環境向けのwebサーバー。様々なオプションを設定可能。 |
html-webpack-plugin | webpackから生成したJavaScriptを埋め込んだHTMLテンプレートを生成できる。 |
html-loader | webpackにHTMLを読み込む。 |
webpack周りの構築を行います。
以下のコマンドを実行してパッケージをダウンロードしてください。
$ npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin html-loader
次にwebpackの設定を行うためにwebpack.config.js
を作成します。
webpackにはプラグインやローダー(JSファイル以外のファイルをバンドルするための拡張プログラム)を追加することができますがその際の設定もここに記述できます。
const path = require('path');
//node.js上でファイルパスを操作できるモジュール
const HtmlWebpackPlugin = require('html-webpack-plugin');
//html-webpack-pluginモジュール
const htmlWebpackPlugin = new HtmlWebpackPlugin({
template: "./src/index.html",
filename: "./index.html"
});
module.exports = {
mode: 'development',
//ビルド時の出力ファイルを圧縮するかしないかの設定。今回はdevelopment。
entry: './src/index.js',
//ビルド時に起点となるJSファイルを指定。
output: {
filename: 'bundle.js',
//ビルド時に出力されるファイル名を設定
path: path.resolve(__dirname, 'dist')
//出力先のパスを指定(ここで絶対パスを指定するためにpathモジュールを使用)
},
devServer: {
port: 8000,
//ローカルサーバーのポート番号を指定
open: true
//webpack-dev-server起動時に自動でブラウザを開く設定
},
plugins: [
htmlWebpackPlugin
//html-webpack-pluginをwebpackに追加
]
}
Babelの設定
Babelとは最新バージョンのECMAScript(Ecma Internationalによって策定されたJavaScriptの標準仕様)を古い型へとコンパイルするツールです。ブラウザによっては最新のECMAScriptをサポートしていない場合があるのでReactなどのモダンJSフレームワークを使用する場合は必須となります。
パッケージ名 | 説明 |
---|---|
@babel/core | Babel本体のモジュール |
@babel/cli | コマンドラインでBabelを実行するために必要なパッケージ。 |
@babel/preset-env | 自動で実行環境に合わせたバージョンでコードをコンパイルする。 |
babel-loader | webpackにBabelを読み込む。 |
導入するには以下のコマンドを実行
$ npm i -D @babel/core @babel/cli @babel/preset-env babel-loader
Babelの導入に合わせてwebpack.config.js
に設定を追記します。
const path = require('path');
//node.js上でファイルパスを操作できるモジュール
const HtmlWebpackPlugin = require('html-webpack-plugin');
//html-webpack-pluginモジュール
const htmlWebpackPlugin = new HtmlWebpackPlugin({
template: "./src/index.html",
filename: "./index.html"
});
module.exports = {
mode: 'development',
//ビルド時の出力ファイルを圧縮するかしないかの設定。今回はdevelopment。
entry: './src/index.js',
//ビルド時に起点となるJSファイルを指定。
output: {
filename: 'bundle.js',
//ビルド時に出力されるファイル名を設定
path: path.resolve(__dirname, 'dist')
//出力先のパスを指定(ここで絶対パスを指定するためにpathモジュールを使用)
},
devServer: {
port: 8000,
//ローカルサーバーのポート番号を指定
open: true
//webpack-dev-server起動時に自動でブラウザを開く設定
},
//Babel追記箇所
loader: {
//ここに各種ローダーを追加する
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
//コンパイル対象からnode_modulesを除外
loader: "babel-loader",
//ローダーの指定
query:{
presets: ["@babel/preset-env"]
}
},
]
},
plugins: [
htmlWebpackPlugin
//html-webpack-pluginをwebpackに追加
]
}
ビルド用のファイルを作成
Webpackを実行してアプリケーションファイルを出力するためには元となるファイルが必要です。
myApp
フォルダのディレクトリ下にsrc
フォルダを作成、src
フォルダ内部にindex.html
ファイルとindex.js
ファイルを作成して下記のコードをコピペしてください。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>myapp</title>
</head>
<body>
<h1 id="text"></h1>
</body>
</html>
const text = document.getElementById('text');
text.innerHTML = "Hello Webpack!"
実際にwebpackを実行してみる
webpackを実行するためのスクリプトをpackage.json
に追記します。
内容は前回の続きからです。
{
"name": "myapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack",
"start": "webpack-dev-server"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/cli": "^7.10.5",
"@babel/core": "^7.11.1",
"@babel/preset-env": "^7.11.0",
"babel-loader": "^8.1.0",
"html-loader": "^1.1.0",
"html-webpack-plugin": "^4.3.0",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
}
}
追記箇所はscriptsプロパティの値です。
これで以下コマンドが使えるようになりました。
$ npm run build
$ npm run start
npm run build
がwebpackを実行してアプリケーションをビルドするコマンド。
npm run start
がwebpack-dev-serverを実行してローカルサーバー上でファイルを実行するコマンドになります。
実際にビルドしてみるとディレクトリ内にdist
フォルダが生成され、その中にアプリケーションファイルがあるのが確認できるはずです。
確認のためwebpack-dev-serverを実行して確認してみましょう。
npm run start
を実行してください。
ブラウザ上にHello Webpack!と表示されれば成功しています。
ここまで出来たら一旦webpackの基礎構築は完了です。
次はcssや画像周りを構築していきます。
続く...