設定ファイル不要のwebpack 4で、BabelやTypeScriptのゼロコンフィグのビルド環境を作ってみる

[webpack 4](https://ics.media/entry/12140)から設定ファイル(`webpack.config.js`ファイル)を書かずともビルドできるようになりました。**シンプルに環境構築したい場合には、webpack 4は便利**です。


※この記事はwebpack 4向けの内容です。webpack 5では動作しないので注意ください。


**BabelとTypeScriptでそれぞれゼロコンフィグの手順をまとめた**ので紹介します。最小限の構成で説明します。

※webpack 4について基本的な使い方はICS MEDIAの記事「[最新版で学ぶwebpack 4入門](https://ics.media/entry/12140)」を参考ください。

## webpack + Babel の環境構築の手順

### モジュールのインストール

コマンドラインで必要なモジュールをインストールします。

```bash
npm i -D webpack webpack-cli babel-core babel-loader babel-preset-env
```

### プロジェクトの構成

次のフォルダ構造で用意します。`src/index.js`ファイルはエントリーポイントなので、必ず用意ください。`src`フォルダの中身は任意のES2017水準の任意のJavaScriptを入れておいてください。

<img width="537" alt="" src="https://qiita-image-store.s3.amazonaws.com/0/2544/c4e2d30b-d9ea-809b-b0d2-67da8a5af5ec.png">

### .babelrc ファイル

Babelでトランスパイルするときには設定ファイルが必要になります。`.babelrc`ファイルに次の内容を記述しておきましょう。

```json
{
  "presets": [
    ["env", {"modules": false}]
  ]
}
```

ちなみに`{modules: false}`を指定しないと import 文が Babel によって CommonJS に変換され、webpack の Tree Shaking 機能が使えなくなります。せっかくの
 Tree Shaking 機能が台無しにならないよう、`{modules: false}`を指定ください。

### ビルドコマンド

`webpack.config.js`ファイルに書いていた内容をコマンドラインの引数で指定します。ゼロコンフィグと謳われていますが、結局はどこかに設定を書くのですね。

ビルドコマンドの引数`--module-bind`で拡張子とBabelの関連付けを設定します。引数`--mode`で本番用か開発用か指定します。

npxを使った場合のビルドコマンド

```bash
npx webpack --mode production --module-bind 'js=babel-loader'
```
package.jsonにビルドコマンドを書いておくと便利。`npm run build`で実行できます。

```package.json
{
  "scripts": {
    "build": "webpack --mode production --module-bind 'js=babel-loader'"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.3",
    "babel-preset-env": "^1.6.1",
    "webpack": "^4.0.1",
    "webpack-cli": "^2.0.9"
  },
  "private": true
}
```

不明点があれば、GitHubにアップしたサンプルファイルを参照ください。

- [サンプル : tutorial\-babek\-zero\_config](https://github.com/ics-creative/170330_webpack/tree/master/tutorial-babel-zero_config)


ICS MEDIAの記事「[最新版で学ぶwebpack 4入門 \- BabelでES2017環境の構築\(React, Three\.js, jQueryのサンプル付き\)](https://ics.media/entry/16028)」でさらにいろんな設定をまとめているので、あわせて参考ください。




## webpack + TypeScript の環境構築の手順



### モジュールのインストール

コマンドラインで必要なモジュールをインストールします。

```bash
npm i -D webpack webpack-cli typescript ts-loader
```

### プロジェクトの構成

次のフォルダ構造で用意します。`src/index.ts`ファイルはエントリーポイントなので、必ず用意ください。`src`フォルダの中身は任意のTypeScriptファイルを入れておいてください。

<img width="488" alt="" src="https://qiita-image-store.s3.amazonaws.com/0/2544/6abc1185-5c6c-a988-960c-a23a69e6e643.png">



### tsconfig.json ファイル

TypeScriptでコンパイルするときには設定ファイルが必要になります。`tsconfig.json`ファイルに次の内容を記述しておきましょう。

```tsconfig.json
{
  "compilerOptions": {
    "sourceMap": true,
    // TSはECMAScript 5に変換
    "target": "es5",
    // TSのモジュールはES Modulesとして出力
    "module": "es2015",
    // node_modules から引っ張ってくる
    "moduleResolution": "node",
    "lib": [
      "dom",
      "es2017"
    ]
  }
}
```

ちなみに`"module": "es2015"`を指定しないと import 文が CommonJS かなにかに変換され、webpack の Tree Shaking 機能が使えなくなります。せっかくの Tree Shaking 機能が台無しにならないよう指定ください。

### ビルドコマンド

`webpack.config.js`ファイルに書いていた内容をコマンドラインの引数で指定します。



npxを使った場合のビルドコマンド

```bash
npx webpack --mode production --module-bind 'ts=ts-loader' --resolve-extensions .ts,.js
```
ビルドコマンドの引数`--module-bind`で拡張子`ts`とTypeScriptの関連付けを設定します。引数`--resolve-extensions`でimport文での拡張子無しを解決できるようにします。引数`--mode`で本番用か開発用か指定します。


package.jsonにビルドコマンドを書いておくと便利。`npm run build`で実行できます。

```package.json
{
  "scripts": {
    "build": "webpack --mode production --module-bind 'ts=ts-loader' --resolve-extensions .ts,.js"
  },
  "devDependencies": {
    "ts-loader": "^4.0.0",
    "typescript": "^2.7.2",
    "webpack": "^4.0.1",
    "webpack-cli": "^2.0.9"
  },
  "private": true
}
```

不明点があれば、GitHubにアップしたサンプルファイルを参照ください。

- [サンプル : tutorial\-typescript\-zero\_config](https://github.com/ics-creative/170330_webpack/tree/master/tutorial-typescript-zero_config)

ICS MEDIAの記事「[最新版TypeScript 2\.7\+Webpack 4の環境構築まとめ\(React, Vue\.js, Three\.jsのサンプル付き\)](https://ics.media/entry/16329)」でさらにいろんな設定をまとめているので、あわせて参考ください。



## まとめ

設定ファイルを書くこと、書かないことのどちらが良いかということはありません。プロジェクトの性質にあわせて最適な方を選べば良いと思います。この記事は最小限の構成で組んでいるため、いろいろカスタマイズしたいこともあるでしょう。そんな方は記事「[最新版で学ぶwebpack 4入門](https://ics.media/entry/12140)」を参照ください。


それでは、楽しいwebpackライフを。