webpackはCLIで使っちゃうぞ!

【告知】 10/14(土)新潟県上越市でIT勉強会を開催します!!

スポンサーリンク

npmパッケージのAPIを学ぶメモ第1弾。

Webpack

Installation

グローバルにインストール。

$ npm install -g webpack

ぼくはプロジェクト毎にインストールしたいので、-g オプションは付けず --save-dev を付与。

$ npm install webpack --save-dev

Compile

コンパイルは $ webpack [input] [output] の形式で実行。

$ webpack ./entry.js bundle.js

この場合は entry.jsbundle.js にコンパイルする。

Watch

ファイルの変更監視。

$ webpack --watch

Progress & Colors

$ webpack --progress --colors

Config (webpack.config.js)

設定を外部ファイルに記述可能。
プロジェクトルートに webpack.config.js を置くと、自動的に認識される。

module.exports = {
    entry: "./entry.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" }
        ]
    }
};

オプションいっぱいある。

webpack.config.js がある場合は、オプションなしで実行する。

$ webpack


イソップへのお悩み相談募集中

イソップに相談しませんか?

当ブログで紹介しているような、Web制作やフリーランスへの悩みをイソップに相談してみませんか?
回答できることがあれば記事の中でご紹介します。