在webpack中包含bootstrap js模块

Question

I successfully use this bootstrap CSS and fonts but dropdowns not work and I can't see any errors in console so I can't debug the issue. Seems like I need to do something to include dropdown.js from node_modules\\bootstrap\\js\\ , but how to do this in "webpacking" way?

package.json:

  ...
  "dependencies": {
    "bootstrap": "*",
    "jquery": "*",
    "vue-resource": "*",
    "vue-router": "*",
    "vue": "*"
  }
  ...

webpack.config.js

module.exports = {
    // the main entry of our app
    entry: ['./src/index.js', './src/auth/index.js'],
    // output configuration
    output: {
        path: __dirname + '/build/',
        publicPath: 'build/',
        filename: 'build.js'
    },

    module: {
        loaders: [
            // process *.vue files using vue-loader
            {test: /\.vue$/, loader: 'vue'},
            // process *.js files using babel-loader
            // the exclude pattern is important so that we don't
            // apply babel transform to all the dependencies!
            {test: /\.js$/, loader: 'babel', exclude: /node_modules/}
        ]
    },

    devServer: {
        headers: {"Access-Control-Allow-Origin": "*"}
    },

    babel: {
        presets: ['es2015'],
        plugins: ['transform-runtime']
    }
}

Some manuals describe how to use another package bootstrap-webpack . I can't understand what the difference, and do I also need use that package insted of bootstrap from twbs

Answer 1

Not shure is this way correct or not, but I solved it:

1. Installed bootstrap-webpack : npm install bootstrap-webpack --save-dev

2. Installed expose-loader : npm install expose-loader --save-dev

3. Added loaders:

to webpack.config.js module: { loaders: [ :

// the url-loader uses DataUrls.
// the file-loader emits files.
{test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff'},
{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
{test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'}

3. Added require on top of main index.js after imports:

Code:

require('expose?$!expose?jQuery!jquery');
require("bootstrap-webpack");

Answer 2

您只是在main.js中错过了这段代码

 import 'bootstrap'