Jump to the content

webpackはCLIで使っちゃうぞ!

npm

    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
    

    注目記事

    最近の記事

    ぼくが書いてます

    フロントエンドエンジニア

    イソップ

    ページの先頭に戻る

    Search results

    ×