JavaScript
Node.js
webpack
babel

webpack最低限(JavaScript編)

More than 1 year has passed since last update.

webpackについて自分用のメモになります。


最低限という背景

普段はBtoB向けのコーポレートサイトの制作が多く、ビルドツールはGulpでもGruntでもなんでもよいのが現状であり、ビルドツールを使用しなくてもなんとかなる感じです。

ただ、流行や今後の動向は理解しておきたいということで、自分の中で最低限webpackでやりたいことを実装してみました。


最低限やりたいこと


  1. javascriptのモジュール管理、Minify、es6/2015のトランスパイル

  2. Sassのコンパイル、ベンダープレフィックスの付与

  3. ブラウザのオートリロード

上記の内容を数回に分けてまとめたいと思います。本記事では1のJS関連を扱います。


対象読者

流行はつかんでおきたいけどあまり難しいことはしたくない、とにかくwebpackを使ってみたいという方向けかと思います。


インストール

まずはwebpackをインストールします。(インストール済みの方は飛ばしてください)

グローバル、プロジェクト両方にインストールする方が良いでしょう。どちらか一方でも問題ありません。

・グローバル

npm install webpack -g

・プロジェクト

cd //プロジェクトのパス

npm init
npm install webpack --save-dev

プロジェクトディレクトリに移動しpackage.jsonを作成、その後プロジェクトのwebpackをインストールします。


実装


ディレクトリ構成

ディレクトリは以下の構成にします。


project /

 ├ webpack.config.js

 ├ dist /

 │ └ index.html

 └ src /

  ├ js /

   ├ entry.js

   └ print.js

 



jsファイルの作成


entry.js

メインの処理を行うjsファイルを作成します、(エントリーポイント)

モジュールの読み込みとes6/es2015のトランスパイルを行います。


entry.js

/*

/* module
**/

const print = require("./print");
print("Hello");

/*
/* es2015
**/

class Test {
constructor(msg) {
document.write(msg);
}
}
let test = new Test('webpack');



print.js


print.js

module.exports = function(msg) {

document.write(msg);
};


babelの準備

es6/es2015のトランスパイルを行うためbabelをインストールします。

npm install babel-loader babel-core babel-preset-es2015 --save-dev


webpack.config.jsの作成

webpackの設定ファイルを作成します。


webpack.config.js

module.exports = {

context: __dirname + '/src',

entry: {
js: "./js/entry.js"
},

output: {
path: __dirname + '/dist',
filename: "./js/app.js"
},

module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
}
]
}
}



context

ビルドの対象となるディレクトリを定義します。


entry

ビルドの起点となるファイルのパスを記述します。requireの記述がされているjsファイルのパスを書きます。jsのビルドだけでなく、sassのビルドもjsのエントリーポイントで行うため、配列や連想配列を使い複数パスを指定することができます。


output

output.pathに出力先、output.filenameに出力ファイルのファイル名を指定します。


module

ビルドのメインとなる部分です。ビルドに必要なモジュール(loader)を指定します。


module.test

ビルドの対象ファイルを記述します。正規表現を使い全てのjsファイルを対象としています。


module.exclude

ビルドから除外するディレクトリを指定しています。/node_modules/を除外しないと処理が重くなるとのことです。


module.loader

ビルドで使用するloaderを指定しています。


module.query

パラメータの指定になります。babel6から仕様が変わり、presets: ['es2015']の指定が必要になったとのことです。


webpackの実行

下記コマンドでwebpackを実行します。

webpack


Minifyの設定

Minifyの設定をwebpack.config.jsに追加します。


webpack.config.js

//↓↓↓↓追加

const webpack = require("webpack");

module.exports = {
context: __dirname + '/src',

entry: {
js: './js/entry.js'
},

output: {
path: __dirname + '/dist',
filename: "./js/app.js"
},

//↓↓↓↓追加
plugins: [
new webpack.optimize.UglifyJsPlugin()
],

module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
}
]
}
}


一行目のconst宣言とpluginsを追加しました。webpackのUglifyJsPluginメソッドで圧縮できます。

追加したらwebpackを実行します。

圧縮はwebpack.config.jsに記述せず、webpackコマンドの引数でもできます。

webpack --optimize-minimize


最後に

おかしなところや間違っているところはお手数ですがご教授いただけますと幸いです。


参考にさせていただいたサイト

webpack module bundler

dackdive's blog

babel6での変更点 Gulp・Webpackの設定

webpackを使ってJSとCSSをコンパイルする(ES6 / Sass)