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というのを使います。
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