webpackについて自分用のメモになります。
最低限という背景
普段はBtoB向けのコーポレートサイトの制作が多く、ビルドツールはGulpでもGruntでもなんでもよいのが現状であり、ビルドツールを使用しなくてもなんとかなる感じです。
ただ、流行や今後の動向は理解しておきたいということで、自分の中で最低限webpackでやりたいことを実装してみました。
最低限やりたいこと
- javascriptのモジュール管理、Minify、es6/2015のトランスパイル
- Sassのコンパイル、ベンダープレフィックスの付与
- ブラウザのオートリロード
上記の内容を数回に分けてまとめたいと思います。本記事では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のトランスパイルを行います。
/*
/* module
**/
const print = require("./print");
print("Hello");
/*
/* es2015
**/
class Test {
constructor(msg) {
document.write(msg);
}
}
let test = new Test('webpack');
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の設定ファイルを作成します。
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に追加します。
//↓↓↓↓追加
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）