webpackでjQueryコードを取り扱う

Tweet

jQueryとAngularJS1系のオレオレビルド環境を作ったでちょっと触れましたが、jQueryとCommonJSがいまいち相性良くないのと設定ファイルが増えすぎてビルド設定が秘伝のタレ化するのを嫌ってjQueryのjsファイル連結にはgulp-concat使っていたのですが、試してみたら意外とwebpack.config.jsの記述量が少なく記述できました。

//webpack.config.js
var jsRootDir = './src/scripts/';
var webpack = require('webpack');

module.exports = {
  entry: {
    index: jsRootDir + 'index.entry.js',
    login: jsRootDir + 'login/login.entry.js',
    dashboard: jsRootDir + 'dashboard/dashboard.entry.js',
    signup: jsRootDir + 'signup/signup.entry.js',
    'user-search': jsRootDir + 'user-search/user-search.entry.js'
  },
  output: {
    filename: '[name].bundle.js',
  },
  //グローバル変数にjQueryを配置する
  plugins: [
    new webpack.ProvidePlugin({
      jQuery: 'jquery',
      $: "jquery"
    })
  ]
};

扱うページが増えるごとにentryが縦に長くなっていくのがちょっとアレですが一応これで必要最低限回せてるって感じです。

Webpackについては日本語の記事ではWebpackを使い倒すなどが詳しいです。

Tweet