Go to Qiita Advent Calendar 2024 Top
LoginSignup
2
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@ryotarohada(Ryotaro Hada)

一から作るモダンフロントエンド環境【Webpack & Babel編】

Last updated at Posted at 2020-08-11

どうも、ディベロッパーの羽田です。
最近業務でモダン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ファイル以外のファイルをバンドルするための拡張プログラム）を追加することができますがその際の設定もここに記述できます。

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起動時に自動でブラウザを開く設定
    },

    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に設定を追記します。

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ファイルを作成して下記のコードをコピペしてください。

index.html
<!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>
index.js
const text = document.getElementById('text');
text.innerHTML = "Hello Webpack!"

##実際にwebpackを実行してみる
webpackを実行するためのスクリプトをpackage.jsonに追記します。
内容は前回の続きからです。

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や画像周りを構築していきます。
続く...

2
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?