Edited at

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

More than 1 year has passed since last update.

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

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

※webpack 4について基本的な使い方はICS MEDIAの記事「最新版で学ぶwebpack 4入門」を参考ください。


webpack + Babel の環境構築の手順


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

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

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


プロジェクトの構成

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


.babelrc ファイル

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

{

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

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

Tree Shaking 機能が台無しにならないよう、{modules: false}を指定ください。


ビルドコマンド

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

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

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

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にアップしたサンプルファイルを参照ください。

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


webpack + TypeScript の環境構築の手順


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

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

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


プロジェクトの構成

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


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を使った場合のビルドコマンド

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にアップしたサンプルファイルを参照ください。

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


まとめ

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

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