TECHNICAL BLOG

2017/9/13 # ツール # フロントエンド 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