2017/7 webpackを使ってみた
いつもはgulpを使っています。
今回初めてwebpackを使いました。
紹介
- Node.js上で動作するbundleツール
- 複数のJSファイルを1ファイルにまとめる(bundle)
- ES6 -> ES5変換
- minify
- etc...
- IE11が2025年まで残るので、ES5への変換ツールとして長くお世話になる一品
サンプルコード
//webpack.config.js
module.exports = {
entry: {
Profile: './profile.js',
Feed: './feed.js'
},
output: {
path: 'build',
filename: '[name].js'
},
plugins: [commonsPlugin]
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
}
]
},
resolve: {
extensions: ['.js']
}
};
gulpとの違い
- gulpはプログラマブルにかけて設定自由度が高い
- webpackはconfigファイルを書くようなイメージで設定が簡単
- どちらでもbabelやSassも動くので基本的な機能に差異なし
備考
- webpack: 2.6.1