如何在Webpack中使用Bootstrap 4(搭配React)

Webpack中使用Bootstrap 4

因為Bootstrap官方文件寫得不是很清楚，然後又有點問題，就順手做了紀錄。不過這篇跟React幾乎沒有什麼關係...主要只是因為我在自己建立的React開發環境中使用了Bootstrap而已

詳細或懶人可以參考我的github

安裝Bootstrap、Bootstrap相依套件和css轉換套件

$ npm install bootstrap@4.0.0-alpha.6 popper.js jquery --save
$ npm install css-loader style-loader --save-dev

設定webpack.config.js

全域中新增變數

var webpack = require('webpack');

在plugins段落中新增

plugins: [
          new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
            Tether: 'tether',
            Popper: ['popper.js', 'default'],
            // In case you imported plugins individually, you must also require them here:
            Util: "exports-loader?Util!bootstrap/js/dist/util",
            Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown",
          })
      ]

在module段落中新增

{
    test: /\.css$/,
    use: [ 'style-loader', 'css-loader' ]
}

使用Bootstrap

在元件中import

import 'jquery'
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.css'

webpack設定檔(參考用)

var path = require('path');
var webpack = require('webpack');

var config = {
    entry: [path.resolve(__dirname, 'app/main.jsx')],
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'bundle.js'
    },
    plugins: [
          new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
            Tether: 'tether',
            Popper: ['popper.js', 'default'],
            // In case you imported plugins individually, you must also require them here:
            Util: "exports-loader?Util!bootstrap/js/dist/util",
            Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown",
          })
      ],
    module: {
        loaders: [{
            test: /\.jsx?$/,
            loaders: ['babel-loader']
        },{
            test: /\.css$/,
            use: [ 'style-loader', 'css-loader' ]
        }]
    }
};

module.exports = config;