webpackメモ

全然わかっていないのですが、webpackというのがフロントエンド開発でよさげらしいので試してみたメモ。

基本的な使い方は公式のチュートリアルがわかりやすいのでそちらを参照。

SourceMap

そのまま1つのjsにまとめられたらデバッグができなくて死が見えているのでSourceMapを出力する。

webpack実行時にオプションを追加して実行

実行時に--devtool source-mapを追加するだけ。

webpack --devtool source-map source.js dest.js

Developer toolsのsourceタブにwebpack://というのができています。 ここからブレークポイントを入れることが可能です。簡単ですね。

configファイルを使う

コマンド打つのもだるいのでconfigファイルを作ります。
リファレンスは以下のページ

http://webpack.github.io/docs/configuration.html

configファイルを作る

touch webpack.config.js

//webpack.config.js
module.exports = {
    entry: './source.js',
    output: {
        filename: 'dest.js'
    },
    devtool: "#source-map",
};

実行

webpack

wetpack.config.jsというのがデフォルトの設定ファイル名です。
開発用とか切り替えたい場合は別ファイル名で作って--configで指定可能です。

webpack --config webpack.config-dev.js 

gulpからwebpackを呼ぶ

gulp-webpackというのを使います。

github.com

npm install -D gulp-webpack

touch gulpfile.js

//gulpfile.js
var gulp = require('gulp');
var webpack = require('gulp-webpack');
gulp.task('webpack', webpackFunc);

function webpackFunc() {
    gulp.src('source.js')
        .pipe(webpack(require('./webpack.config.js')))
        .pipe(gulp.dest('./'));
}

gulpのsrcに元ファイルを組み込んでいるのでwebpack.config.jsのentryは意味が無い扱いになっているんでしょうかね。ちょっと不透明な部分ですね。

実行

gulp webpack