webpackでbootstrap.jsが読み込めない場合の回避方法

回避方法

resolve.aliasを使う．

webpack
  ...
  resolve:
    alias:
      bootstrap: '/absolute/path/to/node_modules/bootstrap/dist/js/bootstrap.js'

ただし，後述しているように原因がわかっていないので，正しい解決方法ではない可能性が高い．

状況説明

npm i jquery bootstrapを事前に実行しておく．

webpack.config.js

var webpack = require('webpack');

module.exports = {
  entry: './entry.js',
  output: {
    filename: 'bundle.js'
  }
};

entry.js

require('bootstrap');

webpackを実行すると，以下のようなエラーが発生する．

ERROR in ./entry.js
Module not found: Error: Cannot resolve module 'bootstrap' in /path/to/project
 @ ./entry.js 1:0-20

このエラーが発生してもbundle.jsは作成される．しかし，bootstrapの読み込みには失敗している．

bundle.js

/* 0 */
/***/ function(module, exports, __webpack_require__) {

	__webpack_require__(!(function webpackMissingModule() { var e = new Error("Cannot find module \"bootstrap\""); e.code = 'MODULE_NOT_FOUND'; throw e; }()));

原因分析

調査中．webpack.config.jsをいろいろ変えてみたが，どれもうまくいかない．

• resolve.root
• ここの方法でbower.jsonを参照するように変えてもだめ
• その他，いろいろ組み合わせてみた

どうやらソースコードを読むしかないようだ．．．ソースコードから原因がわかったら，後で解析結果を追記する．

補足

resolve.aliasでとりあえずbootstrap.jsは読み込めるようになるが，ブラウザにbundle.jsを読み込ませると以下のようなエラーが発生する．

Uncaught Error: Bootstrap's JavaScript requires jQuery 

この問題の解決にはimports-loaderを使う．npm i -D imports-loaderを実行し，entry.jsを以下のように修正する．

entry.js

require('imports?jQuery=jquery!bootstrap');

bundle.js

	/*** IMPORTS FROM imports-loader ***/
	var jQuery = __webpack_require__(2);

ソースコードにwindow.jQuery = require('jquery');を直接記述する必要はない．