LoginSignup
24

More than 5 years have passed since last update.

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

Posted at

回避方法

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');を直接記述する必要はない.

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
24