2017/7 webpackを使ってみた

佐々木誠

2017年7月13日に公開大阪

いつもは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