[바닐라JS] 웹팩으로 빌드하고 깃허브 페이지 배포하기

1. 초기 세팅

//1 현재 디렉토리 상황에 맞게 package.json 파일을 생성한다.
$ npm init -y 



//2 웹팩 설치하기. 실제 프로젝트에 사용하지 않기 때문에 devDependency 옵션을 설정한다.
$ npm install -D webpack webpack-cli4
//webpack은 우선 번들링을 원하는 파일을 먼저 확인하고, import한 라이브러리나 코드가 있으면 해당 코드도 모두 인식하여 하나의 번들 안으로 모두 넣습니다.
//여기서 번들링을 원하는 파일의 위치를 entry, 번들링의 결과물을 output이라고 합니다.



//3 webpack.config.js 파일에 entry와 output 정보 작성
const path = require('path');

module.exports = {
  entry: './script.js',
  output: {
    path: path.resolve(__dirname, 'dist'), // './dist'의 절대 경로를 리턴합니다.
    filename: 'app.bundle.js',
  },
};



//4 번들링하기. 코드를 minify한다.
$ npx webpack



//5 번들링한 코드 실행해서 확인하기
$ node dist/app.bundle.js
//또는 html 파일에 script 불러와서 실행



//6 npm run build 설정하기
//package.json > scripts 객체 안에
"build": "webpack", //작성
//이제 npm run build 사용 가능

2. css 불러오기 (loader)

loader는 JavaScript, JSON이 아닌 파일을 불러오는 역할을 한다. (css 등)

//1 html파일을 dist 폴더로 이동하고 app.bundle.js와 연결한다.
//src/index.js 파일에는 아래와 같이 작성
require('./style.css');



//2 loader 설치
$ npm i -D css-loader style-loader
//css-loader 는 CSS를 JS파일 내에서 불러올 수 있고,
//style-loader 는 불러온 CSS를 style 요소 내에 담아줍니다.



//3 webpack.config.js 조정
 module: {
    rules: [
      {
				// 파일명이 .css로 끝나는 모든 파일에 적용
        test: /\.css$/,
				// 배열 마지막 요소부터 오른쪽에서 왼쪽 순으로 적용
				// 먼저 css-loader가 적용되고, styled-loader가 적용되어야 한다.
				// 순서 주의!
        use: ["style-loader", "css-loader"],
				// loader가 node_modules 안의 있는 내용도 처리하기 때문에
				// node_modules는 제외해야 합니다
        exclude: /node_modules/,
      },
    ],
  },
//npm run build로 번들링 적용 확인
//-> 에러가 없으면 성공
    
    
    
//4 index.html 실행해서 요소 확인 -> style 요소가 생성된 것 확인
//<link rel="stylesheet" href="style.css"> 삭제

3. HTML도 번들에 포함하기 (plugin)

플러그인은 번들링 과정 중에 개발자가 원하는 다양한 작업을 할 수 있도록 도와준다.
그 중 html-webpack-plugin은 번들링 과정 중 html 파일을 자신이 원하는 형태로 가공하여 번들에 포함할 수 있게 한다.

//1 dist 폴더에서 html을 src폴더로 옮긴다.



//2 플러그인 설치
npm i -D html-webpack-plugin



//3 webpack.config.js 파일에 플러그인 적용
const HtmlWebpackPlugin = require('html-webpack-plugin')
...
plugins: [new HtmlWebpackPlugin({
    template: path.resolve(__dirname, "src", "index.html")
  })]
//npm run build로 결과 확인
//dist 폴더에 index.html이 생성된다.

entry -> bundler -> output

entry: 경로파일에서 필요한 모든 것
bundler: webpack
output: 경로의 번들 파일 하나로

css는 app.bundle.js 파일에서 넣어주고,
js는 html-webpack-plugin이 자동으로 스크립트 요소를 넣어준다.

4. 번들을 github page로 배포하기

output이 dist가 아니고 docs로 해야하고, github page 옵션을 변경해야 한다.

레포지토리 보러가기

---

💡 learn more...

1. 번들링 할 때마다 dist 폴더 정리하기

//webpack.config.js
output: { ..., clean: true,}

2. output이 app.bundle.js가 아니라 늘 동적으로 변하도록 생성하기

  output: {
    path: path.resolve(__dirname, 'docs'), //배포 경로 docs로 설정한 것
    filename: '[fullhash].bundle.js',
    clean: true,
  },

3. asset 관리:: css에 minify 적용하기

mini-css-extract-plugin
css-minimizer-webpack-plugin
$ npm install --save-dev mini-css-extract-plugin
$ npm install css-minimizer-webpack-plugin --save-dev

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
  plugins: [new MiniCssExtractPlugin()],
  optimization: {
    minimizer: [
      new CssMinimizerPlugin(),
    ],
  },
};

4. 브라우저 호환성

es6를 지원하지 않는 브라우저에서 실행 가능하도록 설정하기

//webpack.config.js 파일 조정
target: ["web", "es5"], 

5. 작동 모드 설정

development mode, production mode 2가지로 config file 나누기

7. 개발용 서버

라이브 서버와 비슷한 기능을 하는 webpack-dev-server 적용하기