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