webpack结合boostrap

webpack + bootstrap的用法

1、安装jQuery和bootstrap
npm install jquery --save-dev
npm install bootstrap --save-dev

2、bootstrap依赖jquery，故需要配置webpack.base.conf.js
在webpack.base.conf.js中头部添加：

var webpack = require('webpack')

在entry后面添加：
plugins: [
new webpack.ProvidePlugin({
'$' : 'jquery',
'jQuery': 'jquery',
'window.jQuery': 'jquery'
})
]
补充：　ProvidePlugin的机制是：当webpack加载到某个js模块里，出现了未定义且名称符合（字符串完全匹配）配置中key的变量时，会自动require配置中value所指定的js模块。另外，使用ProvidePlugin还有个好处，就是自己写的代码里，不用require jQuery！

3、在main.js中引入：
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'

4、在App.vue中使用：
<template>
<div id="app">
<button type="button" class="btn btn-success btn-sm">按钮</button>
</div>
</template>

5、运行
在npm run dev 时可能还需要安装popper.js,( npm install --save popper.js) 说是bootstrap.min.js 的依赖，安装后再npm run dev就可以了。