Webpack 프로젝트 시작

 

1. 프로젝트 폴더를 생성한다.(사용자가 선택)

c:\\workspaces\va

 

2. 웹팩을 설치한다. 

npm install --save-dev webpack

npm install --save-dev webpack-cli

 

--save는 프로젝트의 build 에 영향을 미치고 --save-dev는 개발 환경에 영향을 미친다. (현재 프로젝트에 webpack이 설치되는 것은 아니므로 두개가 구분 될런지는 관심이 없다.)

 

3. 생성한 폴더로 이동하고 명령창에  npm을 초기화 한다.

npm init

 

4. webpack 사용을 위해 config 파일을 생성한다. config 파일을 수기로 만들어 주어야 한다. 

 

webpack-config.js

const path = require("path");
module.exports = {
    mode: "development",
    entry:{
        main: "./index.js",
    },
    output:{
        filename:"[name].js",
        path: path.resolve("./dist"),
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:["style-loader", "css-loader"],
            }
        ]
    }
}

 

일단 위와 같이 설정해 두자. 자세한 내용은 각각의 경우를 두고 생각해 봐야 한다. 

 

5. css-loader와 style-loader, webpack-dev-server를 설치한다. 

npm install --save-dev css-loader

npm install --save-dev style-loader

npm install --save-dev webpack-dev-server

 

5.  package.json 파일에서 실행을 위해 "build": "webpack"을 추가한다. 

 

일단 가장 기본적인 설정이 완료되었다. index.html, index.js파일을 추가해서 실행시켜 보자.

 

6. webpack 명령어를 실행한다.

 

7. dist 폴더가 생성된걸 확인하고 소스를 확인해 본다. 

 

Visual Studio Code로 프로젝트를 살펴본 모습이다. 경로에 파일이 생성된 것을 알 수 있다.