2016年11月15日

Webpack2を試す

Webpack2を試す

まず、インストールできるバージョンを確認。

npm info webpack versions


今回はWebpack2の最新の2.1.0-beta.26を試します。

まずはパッケージJSONの作成

npm init -y


Webpack2の最新のインストールは

npm i -D webpack@beta


もしくはバージョンを指定したい場合は、

npm i -D webpack@2.1.0-beta.26


package.jsonと同じ階層に以下のwebpack.config.jsを作成

'use strict';

const webpack = require("webpack");

module.exports = {
context: __dirname + "/src",
entry: {
app: "./app.js",
},
output: {
path: __dirname + "/dist",
filename: "[name].bundle.js",
},
};


これでsrc/app.jsのファイルをdist/app.bundle.jsに書き出してくれる。

package.jsonのscriptsを以下のように変更し、

  "scripts": {
"webpack": "webpack -p"
},


コンソールから【npm run webpack】とコマンドを打つとdist/app.bundle.jsが書き出される。

ではimport機能を使ってみましょう、「npm i -D moment」とコマンドをうってapp.jsの内容を以下のように変更しておきます。

'use strict';
import moment from 'moment';
var rightNow = moment().format('MMMM Do YYYY, h:mm:ss a');
console.log( rightNow );


これでmomentの機能を利用できるようになります。

以下のようにするとentryの配列の順にファイルを結合して配列の名前のファイル(app.bundle.js)として書き出してくれます。

'use strict';

const webpack = require("webpack");

module.exports = {
context: __dirname + "/src",
entry: {
app: ["./home.js", "./events.js", "./vendor.js"],
},
output: {
path: __dirname + "/dist",
filename: "[name].bundle.js",
},
};


以下のようにすると結合したり個別に書き出したり設定できます。






Getting Started with Webpack 2 – Thinking in Code

タグ:WebPACK
posted by ねこまんま at 12:14 | Comment(0) | TrackBack(0) | Tool | 更新情報をチェックする