Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

回避方法

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

masnagam
A freelance software engineer
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away