[React] 번들링과 웹팩

간단한 웹앱 번들링 후 배포하기

1. 초기 세팅

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


//2 웹팩 설치하기. 실제 프로젝트에 사용하지 않기 때문에 devDependency 옵션을 설정한다.
$ npm install -D webpack webpack-cli
//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 옵션을 /(root) -> /dosc로 변경해서 배포하기(참고링크)

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

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

2.output이 dist가 아니고 docs로 설정하기

output: {
    path: path.resolve(__dirname, 'docs'),
    clean: true,
    ...
  },

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

  output: {
    path: path.resolve(__dirname, 'docs'),
    filename: '[fullhash].bundle.js',
    clean: true,
  },

Advanced study

1. 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({
  filename: "style.css"
  })],
  optimization: {
    minimizer: [
      new CssMinimizerPlugin(),
    ],
  },
};

2. 브라우저 호환성
   es6를 지원하지 않는 브라우저에서 실행 가능하도록 설정하기(참고링크)

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

3. 작동 모드 설정
   development mode, production mode 2가지로 config file 나누기(참고링크)
   Development(개발모드) : 빠르게 빌드하기 위해 빌드할 때 최적화를 안 하는 특징
   Production(배포모드) : 빌드할 때 최적화 작업을 함(출력된 결과물의 파일 크기가 확 줄어든다.)

//1.모듈에 모드 추가
module.exports = {
  mode: 'development',
};


//명령어 환경(CLI)에서 옵션으로 설정할 경우
npx webpack --mode=development


//webpack.config 파일 나누기
//webpack.config.dev.js
const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const {CleanWebpackPlugin} = require("clean-webpack-plugin");//빌드 이전 결과물 제거

module.exports = {
    mode: 'development',
  target: ["web", "es5"], 
  entry: "./src/script.js",
  output: {
    path: path.resolve(__dirname, 'docs'), //배포 경로 docs로 설정한 것
    filename: '[fullhash].bundle.js',
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        //use: ["style-loader", "css-loader"],
        use: [MiniCssExtractPlugin.loader, "css-loader"],
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [new HtmlWebpackPlugin({
    template: path.resolve(__dirname, "src", "index.html")
  }),
  new MiniCssExtractPlugin({
    filename: "style.css"
  }),
  new CleanWebpackPlugin(),
 ],
  optimization: {
    minimizer: [
    new CssMinimizerPlugin(),
    ]
},
};

//webpack.config.prod.js
const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const {CleanWebpackPlugin} = require("clean-webpack-plugin");//빌드 이전 결과물 제거

module.exports = {
    mode: 'production',
  target: ["web", "es5"], 
  entry: "./src/script.js",
  output: {
    path: path.resolve(__dirname, 'docs'), //배포 경로 docs로 설정한 것
    filename: '[fullhash].bundle.js',
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        //use: ["style-loader", "css-loader"],
        use: [MiniCssExtractPlugin.loader, "css-loader"],
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [new HtmlWebpackPlugin({
    template: path.resolve(__dirname, "src", "index.html")
  }),
  new MiniCssExtractPlugin({
    filename: "style.css"
  }),
  new CleanWebpackPlugin(),
 ],
  optimization: {
    minimizer: [
    new CssMinimizerPlugin(),
    ]
},
};


//package.json 수정
"scripts": {
  "start": "webpack-dev-server --config ./config/webpack.config.dev --hot",
  "build": "webpack --config ./config/webpack.config.prod"
 },

4. 개발용 서버
   라이브 서버와 비슷한 기능을 하는 webpack-dev-server 적용하기(참고링크)
   지금까지는 소스코드를 수정할 때마다 웹팩으로 직접 빌드를 했으나 매번 하기에는 번거롭다.
   이런 불편함을 해결하기 위해 소스코드를 수정할 때마다 자동으로 웹팩이 빌드해주는 webpack-dev-server 를 적용하려 한다.

npm install --save-dev webpack-dev-server 설치


//webpack.config.js 수정
 module.exports = {
 devServer: {
    static: './dist',
  },
  ...
 optimization: {
    runtimeChunk: 'single',
  },
 ...
}


//package.json 수정
 "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack serve --open",
     "build": "webpack"
   },
//npm start 입력하면 브라우저가 자동으로 페이지를 로드
//이제 소스 파일을 변경하고 저장하면, 코드가 컴파일된 후 웹 서버가 자동으로 다시 로드된다.