webpack入門_Getting Started

webpack

このところのjavascriptは発展が著しくECMAscript6が出たりAngularやReact,vueといったフレームワークが登場しています。新規の開発であればこれらの導入を検討しても良さそうですがビルドツールなどの環境整備の情報がまとまっていなかったりしてその分敷居が高くなっているような気がします。
最近はVue.jsが人気のようですがクライアントツールであるvue-cliを使った開発環境の構築が容易であったりしてその分敷居が低くなっているのにも助けられているように思っています。
今回は代表的なビルドツールであるwebpackの公式ドキュメントを触りながら試してみたいと思います。

事前にnodeとnpmはインストールしておく必要があります。

Getting Started

nodeとnpmがインストール済みであれば、以下のコマンドを実行することでwebpackを利用したプロジェクトが作成されます。

mkdir webpack-demo && cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev
mkdir dist

それから以下のファイルを作成します。
src/index.js

import _ from 'lodash';

function component() {
  var element = document.createElement('div');
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  return element;
}
document.body.appendChild(component());

index.html

<!doctype html>
<html>
  <head>
    <title>Getting Started</title>
  </head>
  <body>
    <script src="./dist/main.js"></script>
  </body>
</html>

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  }
};

それからpackage.jsonのscriptsにbuildを追加して以下のようにします。

"scripts": {
  "build": "webpack",
  "test": "echo \"Error: no test specified\" && exit 1"
},

webpack.config.jsにてエントリーポイントをsrc/index.jsに指定しています。ビルドするときはエントリーポイントのファイルを起点にimportしているファイルを再帰的に辿ってビルド対象としています。それからoutputでファイル名をmain.jsとしてdistディレクトリに出力するように指定しています。それでは以下のコマンドを実行してビルドを実行してみます。

npm run build

おそらくビルドに失敗するはずですが、その原因はsrc/index.jsにてimportしているlodashが依存関係に含まれていないことによります。以下のコマンドによりプロジェクトの依存関係にlodashを加えることができますので、実行後再度ビルドをすると成功するはずです。

npm install --save lodash

上記コマンド実行後package.jsonのdependenciesに以下のようにlodashが加えられているかと思います。　　　　

"dependencies": {
  "lodash": "^4.17.10"
}

ビルド後の結果のファイルはdist/main.jsに出力されていて中身を見るとminifyされているのが確認できます。それからindex.htmlをブラウザで開くとhello webpackと表示されているかと思います。