Integration with Webpack

This tutorial will help you integrate the pivot table with webpack. Follow these steps to set up a simple webpack project using Flexmonster Pivot Table & Charts:

Prerequisites

To run a simple application, you will need Node.js and npm. Download them here if they are not already installed on your machine.

Open a terminal/console window and verify that you are running at least node v4.x.x and npm 3.x.x by running node -v and npm -v.

Step 1. Create a new project based on the sample from GitHub

Download a .zip archive with the sample or clone it from GitHub with the following commands:

git clone https://github.com/flexmonster/pivot-webpack
cd pivot-webpack

Step 2. Install npm packages

Install the npm packages described in package.json:

npm install

Step 3. Run the sample project

Run in the console:

npm start

After that, the working sample will be available at http://localhost:8080/.

Project structure

Let’s take a closer look at the folder structure of this application:

dist/
- index.html – here we add the <div> container for Flexmonster.
src/
- index.js – here we embed our pivot table.
package.json – contains the description of the npm packages.
webpack.config.js – the webpack configuration file with standard CSS and font loading.

Take a look at the content of the key files:

index.js

// ES2015  
import 'flexmonster/flexmonster.min.css'; 
import Flexmonster from 'flexmonster'; 

// CommonJS  
// require('flexmonster/flexmonster.min.css'); 
// const Flexmonster = require('flexmonster'); 

new Flexmonster({ 
    container: "#pivot", 
    toolbar: true 
})

webpack.config.js

const path = require('path');

module.exports = {
    mode: 'development',
    entry: {
        app: './src/index.js',
    },
    devServer: {
        static: './dist'
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf|svg)$/,
                use: [
                    'file-loader'
                ]
            }
        ]
    }
};

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Flexmonster / Webpack</title>
</head>
<body>
  <div id="pivot"></div>
  <script src="bundle.js"></script>
</body>
</html>

What’s next?

You may be interested in the following articles: