なぜやったのか

　これまではcliで作られたファイルをちょくちょく手を加えながら作っていたが、上達をしてきてそろそろ製品にしていいかもしれない物を作りたくなってきたからだ。そこでやるなら、おもしろい言語のほうがいいから、node.jsを使ったサイトを作ろうと思い、環境設定をしていた。
　だが、今日は一日かけて環境設定をすることになった。正直、だいたいの構想をメモするだけに今日が終わってしまった。
　こんな思いをするのは今日だけでいいと思いこの記事を書くことにした。

構造

.
├── dist
├── node_modules
├── package-lock.json
├── package.json
├── src--app.js
└── webpack.config.js

package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.4",
    "babel-preset-env": "^1.7.0",
    "express": "^4.16.3",
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.1"
  }
}

app.js

import express from 'express'
const app = express()

app.get('/', (req, res) => res.send('Hello World!'))

app.listen(3000, () => console.log('Example app listening on port 3000!'))

とりあえずこんなかんじでやっていく。

webpack.config.jsのソースコード

webpack.config.js

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/app.js',
  devtool: 'source-map',
  target: 'node',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
    { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
  ]
  },
  resolve: {
    extensions: ['.js']
  }
};

webpackの詳細説明

mode: モードとは、本番か開発をわかるようにしている。これは、本番の環境設定と開発の環境設定で開発時のエラーなどをわかりやすくするためにある。今回はdevlopにしておいた。本番開発になったらproductionとして別にwebpackの設定ファイルを用意すればいい。

entry:これは最初にどれをロードするのかを設定する。このファイルを基点にどのファイルをロードするのかをwebpackは判断する。

devtool:コンパイルされる前と後の関係性を記したファイルを指定する。オフィシャルではほかにもサポートされてはいるが、最初はsource-mapを使ったほうがいいと思う。

target：これはどの処理系かを設定しておく。この設定はブラウザに変えたりすることで、自動的にブラウザ向けのｊｓに変換してくれる。

output:webpackがまとめてくれたjsの格納場所を設定する。pathが格納先のフォルダとファイルの場所を指している。filenameはまとめてくれたjsの名前をしていてくれる。

module:どの変換ツールを使うのかを設定してくれる。ここはそれぞれの変換ツールのホームページに書き方が書いてあるので、それを参考にするといい。最初は第三者が書いた記事を当てにするよりは、本家のサイトを当たってみるほうがいい。

resolve: moduleの関係性を解消してくれるもの。これがない場合、例えばexpressをロードしようとしてもロードがされない状況が生まれる。

苦労したところ。

　試しに、webpackのチュートリアルはできた。いまブラウザで採用されているｊｓのコンパイルはうまくいっていた。
　だが、厳しかったのはその後だった。
　なぜか、babel-loaderがexpressを認識してくれなかった。日本語のサイトでは埒が明かなかったので、海外の質問サイトで同様のエラーがないか探したが、どれもこれも「expressがインストールされてないのでは？」と返答が多かった。
　疲れ切って、試しにbabelの本家にあるとおりにやったら、動いた。
　正直これに大体５時間はかけた。
　これから得られた教訓は「最初に本家サイトに行くべし」だった。基本だけれども、どうしても初心者が再現を試みようとすると、誰かが作ったものを使いたがる性などだと思う。

これを読んでいる初心者たちへ

　以上の教訓から、自分がベストだと思う手順を書く。おそらくこのプロセスを踏めば、うまく行くと思う。良ければ使ってほしい

本家のget startを読んで再現する。
もしget startで再現できなければgoogleで今の年をつけて検索して良さげなサイトのコードを再現する。例（webpack 2018)
そこで再現できなければ、1を参考にしながら、2に手を加える

僕が行ったのはこのプロセスだ。こういうことに時間を費やすよりも、みんなには作って楽しんでもらいたい。

webpackとbabelを使った環境構築の設定の仕方

なぜやったのか

構造

webpack.config.jsのソースコード

webpackの詳細説明

苦労したところ。

これを読んでいる初心者たちへ