Ownedmedia ウェブ制作に役立つコンテンツを発信中!

webpack 2020.04.19

webpackでBabelを使ったJavaScriptトランスパイルの環境構築

Tags: ,,,,

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について、そのほかのユースケースなども別記事でまとめていきたいと思います。

この記事を書いた人

オガワ シンヤ

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?