如何在项目中正确的引用bootstrap，如何选择webpack grunt

Question

先描述一下情况，本人不是搞前端的，但是想用bootstrap做一个网站，对vue.js bootstrap webpack grunt 有一点点的了解，请各位大神指教，有一些问题。
假如我想使用bootstarp，基于这个前提，我如何在项目中引用bootstarp，使用npm么？如果使用npm的话，bootstarp会下载到node_moudles文件中，那引用的时候就必须路径中写node_modules了，看别人说要使用编译工具，然后我就去了解了一下grunt和webpack，那么我该如何选择？我在项目中使用npm引用bootstarp以后，怎么使用grunt或者是webpack进行构建，以前的项目直接是把bootstrap源码放到指定的比方说static文件夹下面，使用了grunt怎么把npm引用的bootstrap编译输出到指定的比方说static文件夹下面？
如果使用webpack，我知道引用js、css的方式就发生改变了，全面集成在bundle.js中了，但是我看别人都说如果使用Vue以后，bootstrap存在jquer问题，该如何正确解决？
基于以上的问题，各位大神，我该如何选择grunt，webpack，还有就是，如果我想使用vue和bootstarp配合，正确姿势是什么？

Answer 1

webpack可以单独用，也可以gulp+webpack或者grunt+webpack
grunt我没用过。。无法回答

bootsrap可以直接在webpack的入口js文件中引入使用

jquery要在webpack中使用需要暴露jquery和$变量给全局，并且为了支持第三方jquery插件直接使用<script>标签引用，还需要安装expose-loader处理

如果使用webpack，我知道引用js、css的方式就发生改变了，全面集成在bundle.js中了

这里全部塞进bundle.js中只是最简单原始的生成方式，其实css可以抽离出来单独引用，公共的js比如jquey、react也是可以entry入口文件和plugin插件里进行设置单独抽离出来变成一个common.js的

如果你真要使用webpack的话- -建议去找资料详细了解一下，很多坑

Answer 2

Webpack 可以将 node_modules 中的东西打包出来，不仅是代码，还包括其它资源。不过我还是比较喜欢原始的直接引用资源的方式，所以没研究这 webpack 对所有资源打包的情况，只用它对脚本进行打包(还是在 babel 之后，即使用 babel-loader)。

如果你也愿意使用直接引用资源的方式，可以用 gulp 或其它构建工具，专门建个任务，从 node_modules 中把相关的资源拷贝到你的 web 对应的静态文件目录中。用 gulp 很简单，通过 .src(....) 选定需要拷贝的原始文件，再 .pipe(gule.dest(...)) 输出到目标目录就好，具体可以看 gulp 的文档。

Answer 3

bootstrap也可以安装到本地， 然后通过webpack打包。不太建议你使用grunt，要淘汰的东西了。没啥必要去研究它了。

如果你钟爱bootsrap的样式，可以推荐你这个库：
https://bootstrap-vue.github.io/
集成好的bootstrap的风格的vue ui框架.

不建议你将jQuery与vue混一块用。两个完全不同的思想，千万别搞一块