javascript - react+webpack怎么配置bootstrap

Question

我想用到bootstrap框架，但是在webpack配置时一直报错，请问webpack要怎么配置bootstrap，与react结合使用呢

Answer 1

直接把 Bootstrap 的 js 和 css 添加到入口的 html 文件里，不需要在 webpack 里配置，这样还能用上 Bootstrap 公共的 CDN

一些需要额外初始化的 JS 代码（比如插件）写在 ComponentDidMount 里

Answer 2

如果非要一起打包的话：

{ 
        test: /\.css$/, 
        loader: "style-loader!css-loader" 
      },
      { 
        test: /\.png$/, 
        loader: "url-loader?limit=100000" 
      },
      { 
        test: /\.jpg$/, 
        loader: "file-loader" 
      },
      {
        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'
      }

然后import Bootstrap from 'bootstrap/dist/css/bootstrap.css';

Answer 3

推荐一下vue-strap。

Answer 4

直接require('bootstrap');行不行？