webpack4.0+babelの環境構築

はじめに

先日webpackを初めて触る機会があったのですが、どの記事も少し前に作成されたものばかりでした。その結果、記事通りに作成しても動かないものばかりであったため、この不便性を解消すべく一度も触ったことがない方向けに従来の方法との違いを説明しながら要点を絞ってまとめました。（今回は環境構築のコマンドのみに留めます。webpackやbabelについては参照に載せたものや別記事をご覧下さい。）

参照

http://top-men.hatenablog.com/entry/2018/02/27/031345
（↑こちらの方の記事をメインに進めて行きます）
https://qiita.com/ChurappsWatatani/items/9798cb28e83242b9e032
https://stackoverflow.com/questions/52092739/upgrade-to-babel-7-cannot-read-property-bindings-of-null/52092788

ステップ１　Node.jsのインストール

まず、webpackを扱うに当たって必要なNode.jsのインストールから開始します。

npm init -y

これによりpackage.json(など)が作られます。

ステップ２　webpackのインストール

npm i webpack -D
npm i webpack-cli -D

上記２つのコマンドでwebpackのインストールが完了します。

ステップ３　package.jsonの変更

"scripts": {
  "build": "webpack"
}

scriptsのbuildをwebpackに設定し直します。

ステップ４　webpack.config.jsの作成

webpack.config.js

const path = require('path');

module.exports = {
  entry: {
    'index': [
      path.resolve(__dirname, '実行ファイル(例：index.js)')
    ]
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'public'),
    publicPath: '/',
  },
};

この時、実行ファイルも作成するのを忘れないで下さい。

ステップ５　実行

npm run build

上記のコマンドを実行することで新しく./dist/main.jsファイルが出来上がります。
一度ここまで問題なく実行できるか確認して下さい。

ステップ６　babelインストール

従来までは下記の方法でインストール出来ました。

npm i babel-loader babel-core babel-preset-env -D

ただ、現在はbabelのバージョンが上がっているため下記のコマンドでインストールする必要があります。

npm i babel-loader @babel/core @babel/preset-env -D

ステップ７　 .babelrcの作成

プロジェクトフォルダ直下に.babelrcを作成しますが、こちらも従来の下記コードだとエラーが起きます。

{ "presets": ["env"] }

バージョンアップしたものを設定して下さい。

{ "presets": ["@babel/preset-env"] }

ステップ８　実行

webpack.config.jsをbabelに対応するものに書き直し、

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};

そして実行

npm run build

問題なければ、自身でjsファイルに設定した通りに作動するはずです。

まとめ（＋お願い）

私自身もwebpackの利点や特徴をよく分かっていない状態のため、既に活用されている方にコメントでwebpackの良いところや上手い利用方法などを教えて下さると嬉しいです。