webpackではJavaScriptの依存関係が原因となる問題を解消するために、外部スクリプトファイルをモジュールとしてインポートし、1つのJavaScriptファイルにすることができます。ただし、それだけではES6の仕様で書かれたJavaScriptを、レガシーブラウザに対応させることができません。そこで今回はBabelを使ってJavaScriptのトランスパイルができるwebpackの環境を作っていきます。   webpackの基本的な環境構築については、過去記事「webpack-dev-serverでローカルサーバーと自動更新させてwebpackのファイル変更を検知する」の内容をベースにしていますので、こちらも合わせて参考にしてください。  

webpackとBabelのパッケージをインストール

まずはnpmで必要なパッケージを一式インストールしていきます。今回は「webpack」「webpack-cli」「webpack-dev-server」のwebpackに関するパッケージと、「@babel/core」「@babel/preset-env」「babel-loader」のBabelに関するパッケージの合計6つをインストールしていきます。

$ npm install --save-dev webpack webpack-cli webpack-dev-server 
$ npm install --save-dev @babel/core @babel/preset-env babel-loader

  パッケージのインストールが完了すると、package.jsonのdevDependenciesに追加されているのが確認できます。また、この時に合わせてwebpackのビルドコマンドなども、scriptsに指定しておくと便利ですね。 【package.json】

{
 ....... 
 "scripts": { 
  "dev": "npx webpack-dev-server",
  "build": "npx webpack",
  "watch": "npx webpack --watch"
 },
 "devDependencies": {
  "@babel/core": "^7.9.0",
  "@babel/preset-env": "^7.9.5",
  "babel-loader": "^8.1.0",
  "webpack": "^4.42.1",
  "webpack-cli": "^3.3.11",
  "webpack-dev-server": "^3.10.3"
  .......
 }
}

  今回はサンプルとして下記のようなファイル・ディレクトリの構成を用意しています。ソースファイルと出力用ファイルのディレクトリをそれぞれ分けておきます。そしてwebpackの設定ファイルである「webpack.config.js」も作成しておきます。

node_modules
dist
  ┗（main.js）
src
  ┗ index.js
webpack.config.js

  今回、webpack.config.jsは下記のように設定しています。過去記事「webpack-dev-serverでローカルサーバーと自動更新させてwebpackのファイル変更を検知する」でまとめているものとほとんど同じですが、JavaScriptのトランスパイルにBabelを使うので、その設定が追加されています。 【webpack.config.js】

module.exports = {
 mode: 'development',
 entry: './src/index.js',
 output: {
  path: `${__dirname}/dist`,
  filename: 'main.js'
 },
 module: {
  rules: [
   {
    test: /\.js$/,
    use: {
     loader: 'babel-loader',
     options: {
      presets: [ '@babel/preset-env' ]
     }
    }
   }
  ]
 },
 devServer: {
  contentBase: `${__dirname}/dist`,
  port: 8080,
  open: true
 }
}

  moduleの項目で、JavaScriptファイルに対してBabelが通るように設定しています。webpackでBabelを使う時には「babel-loader」というモジュールを使います。また、オプションでBabelのプリセットも指定します。この設定でトランスパイルをしていきます。そこでソースファイルとなるJavaScriptファイルを下記のように用意しました。ES6の記法になっているのが確認できます。 【src/index.js】

const addFunction = (arg1, arg2) => arg1 + arg2;

console.log(addFunction(1,2));

  そして、webpackのビルドコマンドを実行します。そうすると出力先ディレクトリにビルドされたJavaScriptファイルが生成されているのが確認できます。

$ npm run build

もしくは

$ npx webpack

  実際にビルドされたJavaScriptファイルを確認してみますと、ES6の記法で書かれたスクリプトが、Babelでトランスパイルされているのが確認できます。 【dist/main.js】

/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};

..................

/***/ "./src/index.js":
/*!**********************!*
!*** ./src/index.js ***!
**********************/
/*! no static exports found */
/***/ (function(module, exports) {

eval("var addFunction = function addFunction(arg1, arg2) {n return arg1 + arg2;n};
nnconsole.log(addFunction(1, 2));nn//# sourceURL=webpack:///./src/index.js?");

/***/ })

  念の為、処理が問題なく動作するか確認してみます。そうすると問題なく処理が行われているのがわかりますね。 【console】

$ node dist/main.js
3

 

---

  webpackはスクリプトファイルをバンドルするためのツールとして、様々なプロジェクトでよく使われていますが単体で使われることはあまりなく、今回のように様々なツールと組み合わせて使われることでよりメリットが際立ちます。フロントエンド開発では必須になってきているwebpackについて、そのほかのユースケースなども別記事でまとめていきたいと思います。