webpackでBabelを使ってES6を使えるようにする 【Sass設定もあり】
この記事では、webpackを使って、JavaScriptのES6で書いたコードを古いブラウザにも対応できるようにしたり、Sassを使った開発の環境構築について解説します。
記事を読むことによって、簡単なホームページ制作などでも、webpackで簡単にこれらの設定をできるようになります。
この記事を書いている僕はJavaScriptが得意分野でフロントエンドのプログラマー(フリーランス)として仕事をしています。
これまで企業などで３年以上のWeb制作経験があり、HTMLやCSSのマークアップからJavaScriptのフレームワークであるVue,React,Nuxtなどフロントエンドの開発を得意としています。
GitHubのサンプルコード
サンプルコードとして、GitHubに完成したコードを上げています。
https://github.com/it-web-life/webpack_settings_basic
※「git clone」するか、緑色の「Code」ボタンをクリックして「Download ZIP」をクリックしてダウンロードして中身を解凍してください。
webpackの概要
webpackは、オープンソースのJavaScriptモジュールバンドラーです。対応するローダーを組み込むことによって、HTML、CSS、画像なども読み込んだり変換することが可能です。
webpackを動かすためには、Node.jsが必要になります。
Babelでトランスパイルして古いブラウザにも対応する
JavaScriptのES6は比較的新しい構文のため、そのままのコードだとIE11などの古めのブラウザでは解釈ができなく、正常に動かなくなります。
そのため、ES5以前の書き方に直す必要がありますが、この設定をwebpackにてBabalを使えば簡単に自動で行うことができます。
SassをコンパイルしてCSSに変換する
Sassは、SASSとSCSSの２種類ありますが、どちらともそのままだとブラウザは解釈ができないため、従来のCSSへの変換が必要です。
こちらもwebpackでライブラリをインストールして設定することにより、自動で簡単に行うことができるようになります。
その他
webpackには、開発用と本番用のビルドを分ける設定があり、minifyなども行ってくれます。
今回はJavaScriptでconsole.logが残っている時に、本番環境では自動でビルド時に削除する設定などを紹介します。
事前準備
Node.jsのバージョンは、執筆時の最新安定バージョン(Long Term Support) 12.18.3を利用することとします。
Node.jsについては、「nodenv を使って Node.js を簡単にバージョン管理する方法 【.node-versionファイルで簡単に切替】」の記事を書いているので参考にしてみてください。
僕はnodenvを使っているので以下のように、12.18.3を指定しています。
$ cd 【プロジェクトディレクトリ】
$ nodenv local 12.18.3
※12.18.3が未インストールの場合はインストール（「nodenv install 12.18.3」コマンド）からする必要があります。
今回はnodeのパッケージ管理ツールに、yarn を使っています。(npm と yarnの２つがメジャーです)
yarnが未インストールならインストールします。
MacでHomebrewがインストールされている環境であればコマンド１つでyarnをインストールできます。
$ brew install yarn
webpackの設定
順番にwebpackの設定をするために進めていきます。
全体の流れがわかるように、手順の解説をメインにしています。
基本的なファイル構成は以下のように設定をしています。詳細は順次説明します。
通常、HTMLを同時に作成してビルドするなら「html-webpack-plugin」等を使いますが、今回はphpなどと組み合わせて使う想定で、JSとCSSのみの出力をする前提で解説しています。また画像もそのまま出力する場合には「copy-webpack-plugin」を使うなどしてください。HTMLや画像の出力もコントロールしたい場合は別記事を参考にしてください。
初期化をします。初期化をすると、package.jsonが作成されます。
$ yarn init -y
$ yarn init -y
yarn init v1.7.0
warning The yes flag has been set. This will automatically answer yes to all questions, which may have security implications.
success Saved package.json
✨ Done in 0.05s.▼package.json
{
"name": "webpack_settings_basic",
"version": "1.0.0",
"repository": "https://github.com/it-web-life/webpack_settings_basic.git",
"author": "TS",
"license": "MIT"
}※細かい部分は違うと思いますが気にしなくてOKです
Webpackの基本的な構成を作成
webpack、webpack-cli、webpack-dev-serverをインストールします。
$ yarn add -D webpack webpack-cli webpack-dev-server
次に「webpack.config.js」に相当するファイルを作成します。
今回はdevelopmentとproductionで構成を変えるのでファイルを２種類作ることにします。
development用としてwebpack.dev.js、production用としてwebpack.prod.jsの２種類を作成し、共通のwebpack.common.jsを読み込ませます。
※webpack4からの書き方について公式でも解説されています
この構成のためにwebpack-mergeもインストールします。
$ yarn add -D webpack-merge
ここまでで、「webpack.common.js」「webpack.dev.js」「webpack.prod.js」を作成して、ベースとなるコードを書きます。
▼webpack.common.js ※共通ファイルには後ほどBabelの設定などを記載します。
module.exports = {}▼webpack.dev.js
const { merge } = require('webpack-merge');
const common = require('./webpack.common');
const merged = merge(common, {
mode: 'development',
output: {
path: __dirname + '/dist/',
filename: 'bandle.js',
},
devServer: {
host: '0.0.0.0',
disableHostCheck: true,
contentBase: __dirname + '/dist/'
},
devtool: 'inline-source-map'
});
// 確認用
console.log(merged);
module.exports = merged;開発時は、「webpack-dev-server」を使って変更があれば更新されるようにします。
distディレクトリにwebpackがビルドするファイルができるように指定しています。
ソースマップ表示をするために「devtool: ‘inline-source-map’,」をwebpack.dev.jsのみに追記しています。
▼webpack.prod.js
const { merge } = require('webpack-merge');
const common = require('./webpack.common');
const merged = merge(common, {
mode: 'production',
output: {
path: __dirname + '/dist/',
filename: 'bandle.js'
}
});
// 確認用
console.log(merged);
module.exports = merged;package.jsonに以下のscriptsを追加して、コマンドで簡単に実行できるようにします。
▼package.json
"scripts": {
"dev": "webpack-dev-server --config webpack.dev.js",
"build": "webpack --config webpack.prod.js"
}開発時は「yarn dev」、デプロイ用のビルドを作成するときは「yarn build」を実行します。
「yarn build」を実行すると、「dist」ディレクトリに、「bandle.js」と「style.css」が出力され、これをhtmlなどで読み込ませて利用します。
ES6をBabelでトランスパイルする
ES6でJavaScriptを記載すると、モダンなブラウザ以外の対応ができていないIE11などでは正常に動作がしなくなります。
そこで、Babelを使って古いブラウザでもJavaScriptが解釈できるようにトランスパイルするように設定します。
Babel関連をインストールします。
▼インストールするパッケージ
@babel/cli
@babel/core
@babel/preset-env
babel-loader
@babel/polyfill
※Babel7.4.0以降では「@babel/polyfill」が非推奨となっていますが、僕の試した限りだとIE11で挙動が不安定だった(一部のシンタックスでトランスパイルが不完全？)ので、「@babel/polyfill」を使うためにBabelのバージョンを7.4.0より以前のバージョンにして「@babel/polyfill」を利用する形で今回は進めています。
$ yarn add -D @babel/cli@^7.2.3 @babel/core@^7.2.2 @babel/preset-env@^7.3.1 babel-loader@^8.0.5 @babel/polyfill@^7.2.5
webpack.common.jsにBabelの設定を追加します。
▼webpack.common.js
module.exports = {
entry: ['@babel/polyfill', __dirname + '/src/index.js'],
module: {
rules: [
{
test: /\.js$/,
exclude: '/node_modules/',
use: [
{
loader: 'babel-loader',
options: {
presets: [[
'@babel/preset-env',
{
useBuiltIns: 'entry'
}
]]
}
}
]
}
]
}
};SASSの取り込みをする
まずはCSSを取り込むために、css-loaderをインストールします。
$ yarn add -D css-loader
続いて、SASSのコードを取り込むために、「sass-loader」をインストールします。
また、SASSから従来のCSSへコンパイルするために、「node-sass」もインストールします。
$ yarn add -D sass-loader node-sass
今回は、CSSファイルはJSにバンドルせずに分ける設定にするため、「mini-css-extract-plugin」をインストールします。
$ yarn add -D mini-css-extract-plugin
webpack.common.jsに設定を書きます。
▼webpack.common.js
module: {
rules: [
// Babel設定
【中略】
// SASS SCSS CSS設定
{
test: /\.(sa|sc|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
url: false
}
},
'sass-loader'
]
}
]
},
// スタイルをCSSファイルに分離する設定
plugins: [
new MiniCssExtractPlugin({
filename: 'style.css'
})
]modulesのrulesにSASSの設定を追加したのと、pluginsにMiniCssExtractPluginの設定で出力されるファイルを「style.css」と指定しています。
rulesのSASSで、設定の順番として、下から順番に実行されるため、下から順に’sass-loader’ → ‘css-loader’→MiniCssExtractPluginとしています。
従来のCSSファイルについて、sass-loaderを通しても問題がないため、まとめて記述しています。
JavaScriptをminifyする
JavaScriptをminifyするために、「uglifyjs-webpack-plugin」をインストールします。
(minifyについてはラッパーなので実際にはUglifyJS2が行います)
$ yarn add -D uglifyjs-webpack-plugin
console.logをproductionでは消す設定もオプションで追加します。
minifyはproductionのみ設定するため、webpack.prod.jsのみに記載します。
▼webpack.prod.js
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
【中略】
const merged = merge(common, {
【中略】
optimization: {
minimizer: [
// JSのminify
new UglifyJsPlugin({
uglifyOptions: {
compress: {
drop_console: true
}
}
})
],
}
});※console.logが残っている場合は削除するオプションの「drop_console」をつけて「UglifyJsPlugin」の記述を追記
CSSをminifyする
CSSをminifyするために、「optimize-css-assets-webpack-plugin」をインストールします。
$ yarn add -D optimize-css-assets-webpack-plugin
「OptimizeCssAssetsPlugin」の設定をproductionの方にのみ追記します。
▼webpack.prod.js
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
【中略】
optimization: {
minimizer: [
// JSのminify
【中略】
// CSSのminify
new OptimizeCssAssetsPlugin({})
],
}これで設定は完了です。
まとめ
完成したwebpack設定のコードは、以下のGitHubに上げています。
https://github.com/it-web-life/webpack_settings_basic
ご自身でやってみて、もし正常に動作できない場合などはGitHubのコードをダウンロードしてローカルの環境でyarn installをしてから試して見てください。また、その際はNode.jsのバージョン(12.18.3)を合わせるようにしてください。
webpackの設定が完了したら、以下のように使い分けて開発、本番デプロイをすることができます。
開発時
yarn devコマンドを実行すると、webpack-dev-serverが立ち上がり、JSやSassを変更すると自動で再コンパイルされます。
http://localhost:8081/ にアクセスすると、開発用にビルドされた環境へアクセスできるはずです。
本番環境用のビルドをするとき
yarn buildコマンドを実行すると、「dist」ディレクトリに、「bandle.js」と「style.css」が出力されるので、本番用のHTMLなどで読み込みをさせて動作させます。
また「webpackでHTML・画像をそのまま出力 【jQueryを組み込む方法も紹介】」の記事で、さらにHTMLや画像を出力する方法、jQueryを追加する方法を載せているので、必要な場合は参考にしてください。
今回はwebpackについて解説しました。
ご参考になれば、幸いです。
Babel CSS ES6 JavaScript Sass webpack
※当サイトでは一部のリンクについてアフィリエイトプログラムを利用して商品を紹介しています