# Webpack에서 SpreadJS 시작하기
## Content
Webpack은 JavaScript용 모듈 번들러입니다. JavaScript 모듈을 컴파일하는 데 사용됩니다. SpreadJS는 Webpack 개발 환경에서 개별 모듈과 플러그인을 함께 사용하는 것을 지원합니다.
### 모듈과 플러그인 함께 사용하기
다음 단계들을 포함합니다:
1. 명령 프롬프트 창을 열고 다음 명령어를 입력하여 Webpack 개발 환경을 구성합니다.
디렉터리를 생성하고, npm을 초기화하며, Webpack과 webpack-cli를 로컬에 설치합니다.
```shell
mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev
```
2. 다음과 같은 디렉터리 구조와 파일을 생성하고 내용을 추가합니다.
```shell
webpack-demo
|- package.json
|- webpack.config.js
|- /dist
|- index.html
|- /src
|- index.js
```
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"
}
}
```
webpack.config.js 파일에 다음 코드를 추가합니다:
```javascript
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
mode: 'none'
};
```
index.js 파일에 다음 코드를 추가합니다:
```javascript
function greet() {
const element = document.createElement('div');
element.innerHTML = "Hello SpreadJS!"
return element;
}
document.body.appendChild(greet());
```
index.html 파일에 다음 코드를 추가합니다:
```html
Getting Started
```
3. 다음 명령어로 프로젝트를 빌드하고 실행합니다.
```shell
npm run build
```
4. 브라우저에서 index.html을 엽니다.
Webpack을 사용하여 프로젝트를 만드는 방법에 대한 자세한 내용은 [Webpack](https://webpack.js.org/guides/getting-started/)을 참고하세요.
5. 프로젝트에 SpreadJS NPM 모듈과 플러그인을 설치합니다.
다음 명령어로 SpreadJS NPM 모듈과 플러그인을 설치합니다:
```shell
npm install @mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine @mescius/spread-sheets-print
```
6. index.js 파일을 다음 코드로 업데이트합니다:
```javascript
import * as GC from "@mescius/spread-common";
import "@mescius/spread-calc-engine";
import "@mescius/spread-sheets-core";
import "@mescius/spread-sheets-calc-engine";
import "@mescius/spread-sheets-print";
let spread = new GC.Spread.Sheets.Workbook("ss");
let sheet = spread.getActiveSheet();
sheet.setValue(0, 0, "Hello SpreadJS");
spread.print();
```
7. index.html 파일을 다음 코드로 업데이트합니다:
```html
Getting Started
```
8. webpack.config.js 파일을 다음 코드로 업데이트합니다:
```javascript
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
resolve: {
alias: {
"@mescius/spread-sheets": require.resolve("@mescius/spread-common")
}
}
};
```