Use Bootstrap Table in Webpack

Because I saw the problem saying using the latest version of Bootstrap Table in Webpack will fail, I tried how to use Bootstrap Table in Webpack from scratch.

First, according to the Getting Started documentation of Webpack, we created a test project webpack-bootstrap-table, here we use webpack-dev-server to start the service:

1
2
3
4


mkdir webpack-bootstrap-table
cd webpack-bootstrap-table
yarn init -y
yarn add webpack webpack-cli webpack-dev-server -D

Next, add bootstrap-table and the required dependencies jquery and bootstrap:

1

yarn add jquery bootstrap popper.js bootstrap-table

Since we need to import the css file, we need to use the css-loader module:

1

yarn add style-loader css-loader -D

Add directories and files:

1
2
3
4
5
6
7


  webpack-bootstrap-table
  |- package.json
+ |- dist
+   |- index.html
+ |- /src
+   |- index.js
+ |- webpack.config.js

dist/index.html：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


<!doctype html>
<html>
  <head>
    <title>Webpack Bootstrap Table</title>
  </head>
  <body>
    <table id="table"></table>
    <script src="main.js"></script>
  </body>
</html>

src/index.js：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30


import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap-table/dist/bootstrap-table.min.css'

import $ from 'jquery'
import 'bootstrap'
import 'bootstrap-table' // dist/bootstrap-table.min.js by default

$('#table').bootstrapTable({
  search: true,
  showColumns: true,
  columns: [{
    field: 'id',
    title: 'Item ID'
  }, {
    field: 'name',
    title: 'Item Name'
  }, {
    field: 'price',
    title: 'Item Price'
  }],
  data: [{
    id: 1,
    name: 'Item 1',
    price: '$1'
  }, {
    id: 2,
    name: 'Item 2',
    price: '$2'
  }]
})

webpack.config.js：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


const path = require('path')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist')
  }
}

And then add build and dev scripts in the package.json file:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


{
  "name": "webpack-bootstrap-table",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "css-loader": "^3.2.0",
    "style-loader": "^1.0.0",
    "webpack": "^4.40.2",
    "webpack-cli": "^3.3.9",
    "webpack-dev-server": "^3.8.1"
  },
  "dependencies": {
    "bootstrap": "^4.3.1",
    "bootstrap-table": "^1.15.4",
    "jquery": "^3.4.1",
    "popper.js": "^1.15.0"
  },
  "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server --inline --progress"
  }
}

Run the server (or yarn build):

1

yarn dev

Open the browser and it will work.

Contents