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

1. 현재 디렉토리에 npm설치

npm init -y

• package.json 파일 생성

2. webpack 설치

npm install -D webpack webpack-cli

• webpack은 이 프로젝트를 번들링하기 위한 라이브러리이긴 하지만, 실제 프로젝트에 사용하지 않기 때문에 devDependency 옵션을 설정하고 설치

3. webpack config 파일 작성

• webpack.config.js 파일에 entry와 output 정보를 작성한다.

const path = require('path');

module.exports = {
  entry: "./src/script.js",
  output: {
    filename: "[fullhash].bundle.js",
    path: path.resolve(__dirname, 'dist'),
  },
};

4. js 파일 번들링

npx webpack

• src폴더에 있는 js파일을 번들링한다.
• package.json 파일, script에 명령어를 추가한다.

"scripts": {
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

• npm run build로 번들링 실행
  

5. HTML 파일 번들링하기

• html-webpack-plugin 설치

  npm i -D html-webpack-plugin

• 설치 후 webpack.config.js 파일에 해당 플러그인을 적용

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: "./src/script.js",
  output: {
     filename: "[fullhash].bundle.js",
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'src', 'index.html'),
    }),
  ],
};

• npm run build후 결과를 확인
• dist 폴더에 index.html 파일이 생성
• index.html 브라우저에서 실행시켜보면 css는 적용되지 않았지만 잘 동작하는 것을 확인

6. CSS 번들링

• style-loader 와 css-loader 설치

  npm i -D style-loader css-loader

• script.js 파일에서 CSS 파일 임포트

require("./style.css");

• webpack.config.js에 css-loader 등록

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/script.js",
  output: {
    path: path.resolve(__dirname, "dist"), // './dist'의 절대 경로를 리턴합니다.
     filename: "[fullhash].bundle.js", // 파일name동적생성
    clean: true, // 빌드전 빌드폴더 정리
  },
  module: {
    rules: [
      {
        // 파일명이 .css로 끝나는 모든 파일에 적용
        test: /\.css$/,
        // 배열 마지막 요소부터 오른쪽에서 왼쪽 순으로 적용
        // 먼저 css-loader가 적용되고, styled-loader가 적용되어야 한다.
        // 순서 주의!
        use: ["style-loader", "css-loader"],
        // loader가 node_modules 안의 있는 내용도 처리하기 때문에
        // node_modules는 제외해야 합니다
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "src", "index.html"),
    }),
  ],
};

• npm run build 로 번들링
• dist/index.html 파일을 브라우저에서 열어보면 스타일이 적용된 것을 확인

7.개발서버 설정

• 웹팩을 통해 배포하기 위한 코드를 작성하면 require등의 코드가 브라우저에서 실행되지 않는 등의 문제 때문에 실시간으로 개발 상황을 확인하기 불편하다. 이 때 웹팩에서 제공하는 개발서버 기능을 활용하면 된다.

• 개발 서버 기능 설치

  npm install -D webpack-dev-server

• webpack.config.js 수정

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/script.js",
  output: {
     filename: "[fullhash].bundle.js",
    path: path.resolve(__dirname, "dist"),
    clean: true, // 빌드전 빌드폴더 정리
  },
  module: {
    rules: [
      {
        // 파일명이 .css로 끝나는 모든 파일에 적용
        test: /\.css$/,
        // 배열 마지막 요소부터 오른쪽에서 왼쪽 순으로 적용
        // 먼저 css-loader가 적용되고, styled-loader가 적용되어야 한다.
        // 순서 주의!
        use: ["style-loader", "css-loader"],
        // loader가 node_modules 안의 있는 내용도 처리하기 때문에
        // node_modules는 제외해야 합니다
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "src", "index.html"),
    }),
  ],
  devServer: {
    static: {
      directory: path.resolve(__dirname, "docs"),
    },
    port: 3001, //포트 번호는 임의로 지정한다.
  },
};

• package.json 파일, script에 명령어 수정

"scripts": {
    "build": "webpack --mode=production",
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack serve --open --mode=development"
  },

• npm start를 통해 서버를 띄운 후 개발중인 파일을 수정 후 저장하면 자동으로 빌드되어 서버에 반영

8. 배포하기

• dist파일들을 docs로 바꾸기, github page 옵션을 변경

9. Asset관리

• CSS에 minify를 적용
• mini-css-extract-plugin 설치

  npm install --save-dev mini-css-extract-plugin

• css-minimizer-webpack-plugin 설치

  npm install css-minimizer-webpack-plugin --save-dev

• webpack.config.js 수정

10. 브라우저 호환성

• ES6를 지원하지 않는 브라우저에서 실행 가능하게 target 속성을 활용

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

module.exports = {
  target: ["web", "es5"],//ES6를 지원하지 않는 브라우저에서 실행 가능
  entry: "./src/script.js",
  output: {
    path: path.resolve(__dirname, "docs"),
    filename: "[fullhash].bundle.js",
    clean: true
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "src", "index.html"),
    }),
    new MiniCssExtractPlugin(),
  ],
  optimization: {
    minimizer: [
      new CssMinimizerPlugin(),
    ],
  },
};

• npm run build : docs파일에 bundle.js가 새로 정리가 돼고, main.css 파일이 생긴다.

11. 작동 모드 설정

• config file를 development mode와 production mode로 나누다.

• webpack.config.js 대신에 webpack.config.base.js와 webpack.config.dev.js와
  webpack.config.prod.js로 나눠서 만든다.

• webpack.config.base.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

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

• webpack-merge를 활용하여 dev모드와 prod모드 config만든다.

  npm install --save-dev webpack-merge

• webpack.config.dev.js

const { merge } = require("webpack-merge");
const baseConfig = require("./webpack.config.base");

module.exports = merge(baseConfig, {
  mode: "development",
  devServer: {
    port: 3001,
  },
});

• webpack.config.prod.js

const { merge } = require("webpack-merge");
const baseConfig = require("./webpack.config.base");

module.exports = merge(baseConfig, {
  mode: "production",
});

• package.json 파일, script에 명령어 수정

  "scripts": {
    "build": "webpack --config webpack.config.prod.js",
    "dev": "webpack-dev-server --open --config webpack.config.dev.js"
  },

• 이렇게 하면 개발할땐 npm run dev로 개발 서버를 구동시키고, 배포할 땐 npm run build를 해서 이때 적용되는 webpack모드가 상황에 맞게 달라지게 된다.

오늘의 오류 해결

• 중간중간 npm run build하기!!!
• output의 filename: "[fullhash].bundle.js" 이런식으로 랜덤으로 파일이름 지정