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:
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
.
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
Install the npm packages described in package.json
:
npm install
Run in the console:
npm start
After that, the working sample will be available at http://localhost:8080/
.
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:
// 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
})
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' ] } ] } };
<!DOCTYPE html> <html> <head> <title>Flexmonster / Webpack</title> </head> <body> <div id="pivot"></div> <script src="bundle.js"></script> </body> </html>
You may be interested in the following articles: