- webpack 2.2.0-rc4
- npm 4.0.5
環境準備
- npmをインストールする。
以上。
brew install npm
Mac以外は知りません。
Getting Startedでやってることと起こること
割愛したり順番入れ替えたりしています。
package.jsonの作成
npm init -y
package.jsonができる。この時点ではdependenciesなどは空。
{
...
"dependencies": {},
"devDependencies": {},
...
}
使うライブラリの追加
npm install --save-dev webpack@beta
webpackがpackage.jsonのdevDependenciesに追加される。
npm install --save lodash
lodashがpackage.jsonのdependenciesに追加される。
{
...
"dependencies": {
"lodash": "^4.17.4"
},
"devDependencies": {
"webpack": "^2.2.0"
},
...
}
こんな感じで、必要なものを追加していく。
自分で書き換えても良いけれど、npm install --saveでやるとダウンロードもしてくれるのでビルド時の待ち時間が減る。
webpack.config.jsの作成
作らなくてもビルドパラメーターに渡せば動かせられるが、設定は多くなるのでwebpack.config.jsに書いておく。
作成するコマンドはない？ので自分で書く。
var path = require('path');
module.exports = {
entry: './app/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
npmにwebpackを実行してもらえるようにする
{
...
"scripts": {
"build": "webpack"
},
...
}
npm run buildでwebpackを実行できるようにする。
webpackコマンドを使いたいのなら、globalへインストールすればよい（/usr/local/bin/webpack が作られる。）
npm install webpack@beta -g
webpack app/index.js dist/bundle.js
しかしbuild時に他のことをさせたりオプションを指定したりするので、npm経由で実行させるようにしておくほうがよさそう。
app/index.jsの作成
import _ from 'loadash';
function component () {
var element = document.createElement('div');
element.innerHTML = _.join(['Hello','webpack'], ' ');
return element;
}
document.body.appendChild(component());
「loadashを使うコード」くらいのイメージ。
重要なのはimportのところ。
ビルド実行
npm run build
dist/bundle.jsに出力される。
index.jsに自分で書いたところは以下のようになってる。
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_lodash__ = __webpack_require__(0);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_lodash___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_lodash__);
function component () {
var element = document.createElement('div');
element.innerHTML = __WEBPACK_IMPORTED_MODULE_0_lodash___default.a.join(['Hello','webpack'], ' ');
return element;
}
document.body.appendChild(component());
/***/ })
HTMLでbundle.jsを使うようにする
HTMLはこのbundle.jsを使う形にすればOK
<html>
<head>
<title>webpack 2 demo</title>
</head>
<body>
...
<script src="dist/bundle.js"></script>
</body>
</html>
シンプル。
出来上がる構成
Getting Startedの成果物。
.
├── app
│ └── index.js
├── index.html
├── package.json
└── webpack.config.js
コミットしちゃいけないもの
| 作られるもの | 作成コマンド | 情報源 |
|---|---|---|
| node_modules/ | npm install |
package.json |
| dist/ | webpack |
webpack.config.js |
"dist/" は webpack.config.js の記述次第なので .gitignore_global1 には書かない。"node_modules/" は書いて良いかも。
動かし方
他の環境でビルドする場合。
npm install
npm run build
npm installでpackage.jsonに書かれているものをnode_modules/に持ってくる。
npm run buildでwebpack.config.jsに書かれている設定でビルドされる。
-
"core.excludesfile" で設定する共通的なgitignoreを便宜上こう呼ぶ。 ↩