# SpreadJS with Webpack
## Content
Webpack is a module bundler for JavaScript. It is used to compile JavaScript modules. SpreadJS supports using individual module and plugin together in the Webpack development environment.
### **Using Module and Plugin together**
This involves the following steps:
1. Open the command prompt window and type the following commands to configure Webpack development environment.
Create a directory, initialize npm, install webpack locally, and install the webpack-cli.
```shell
mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev
```
2. Create the following directory structure, files, and add their contents.
```shell
webpack-demo
|- package.json
|- webpack.config.js
|- /dist
|- index.html
|- /src
|- index.js
```
Add the following code in package.json.
```javascript
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.88.1",
"webpack-cli": "^5.1.4"
}
}
```
Add the following code in webpack.config.js file:
```javascript
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
mode: 'none'
};
```
Add the following code in index.js file:
```javascript
function greet() {
const element = document.createElement('div');
element.innerHTML = "Hello SpreadJS!"
return element;
}
document.body.appendChild(greet());
```
Add following code in index.html file:
```html
Getting Started
```
3. Build and run the project using the following command.
```shell
npm run build
```
4. Open index.html in the browser.
For more information on how to create a project using Webpack, refer to [Webpack](https://webpack.js.org/guides/getting-started/).
5. Install with SpreadJS NPM modules and plugins in the project.
Install the SpreadJS NPM modules and plugins using the following commands:
```shell
npm install @grapecity/spread-common @grapecity/spread-calc-engine @grapecity/spread-sheets-core @grapecity/spread-sheets-calc-engine @grapecity/spread-sheets-print
```
6. Update index.js file using the following code:
```javascript
import * as GC from "@grapecity/spread-common";
import "@grapecity/spread-calc-engine";
import "@grapecity/spread-sheets-core";
import "@grapecity/spread-sheets-calc-engine";
import "@grapecity/spread-sheets-print";
let spread = new GC.Spread.Sheets.Workbook("ss");
let sheet = spread.getActiveSheet();
sheet.setValue(0, 0, "Hello SpreadJS");
spread.print();
```
7. Update index.html file using the following code:
```html
Getting Started
```
8. Update webpack.config.js file using the following code:
```javascript
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
resolve: {
alias: {
"@grapecity/spread-sheets": require.resolve("@grapecity/spread-common")
}
}
};
```