[Webpack] 셋팅 진행 순서

1. 우선 node JS 설치

2. package json 생성

npm init -y

3. webpack 설치

npm i --save-dev webpack webpack-cli

webpack 과 webpack-cli 를 설치해 줘야 한다.

4. package.json과 같은 위치에 src 폴더 생성

mkdir src

cd src

touch index.js

index.js 파일을 생성한다. src 폴더의 index.js 파일을 만들면 webpack에서 자동빌드하는 기본 경로이다.

index.js 파일에 다음과 같이 작성 후 저장.

console.log(`index js 입니다.`);

5. webpack4에 추가된 내용에 의해 package.json에 다음과 같이 추가.

"scripts": {

    "dev": "webpack --mode development",

    "build": "webpack --mode production"

  }

--mode development , --mode production 가 추가 되었다.

다음을 실행해 보면 dist 폴더가 생성되며 안의 js 파일을 확인해 보면 다음과 같다.

npm run dev : 소스가 개발모드로 알아보기 쉽게 풀어져 있다.

npm run build : 소스가 압축 되어진다.

6. babel 설치

babel 을 사용하기 위해선 3가지 설치가 필요합니다.

npm i --save-dev babel-core babel-loader babel-preset-env

.babelrc 파일 생성 후 안에

{

    "presets": [

        "env"

    ]

}

작성.

7. webpack.config.js 파일 생성

module.exports = {

  module: {

    rules: [

      {

        test: /\.js$/,

        exclude: /node_modules/,

        use: {

          loader: "babel-loader"

        }

      }

    ]

  }

};

작성.

8. webpack-dev-server 가동하기.

npm i --save-dev webpack-dev-server

9. html Plugin 설치

webpack-dev-server 만 설치 하고 open 했을때 

html 변화 감지를 못했는데 html Plugin 을 깔고 저장하면 변화를 감지한다.

하지만 script와 css 변화를 감지하지 못한다.

npm i --save-dev html-webpack-plugin html-loader

설치후 build 하면 dist 폴더에 index.html 생성

10. css 파일로 추출.

npm i --save-dev mini-css-extract-plugin css-loader

참고 : 

https://www.valentinog.com/blog/webpack-tutorial/

https://medium.com/@shlee1353/%EC%9B%B9%ED%8C%A9-%EC%9E%85%EB%AC%B8-%EA%B0%80%EC%9D%B4%EB%93%9C%ED%8E%B8-html-css-%EC%82%AC%EC%9A%A9%EA%B8%B0-75d9fb6062e6

http://blog.naver.com/PostView.nhn?blogId=chrisphotography&logNo=221447952006&categoryNo=0&parentCategoryNo=0&viewDate=&currentPage=1&postListTopCurrentPage=1&from=postView