간단한 웹앱 번들링 사용

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

npm init -y

• package.json 파일 생성됨

2. webpack 설치

npm install -D webpack webpack-cli

• -D : --save-dev package.json 파일의 devDependencies 항목에 저장(개발 단계에서만 이용)

3. Webpack 설정 파일 작성

• 웹팩은 우선 번들링하는 원하는 파일을 확인하고(entry), 여기에 import한 라이브러리나 코드가 있으면 해당 코드를 모드 인식해서 하나의 번들(output) 안으로 압축한다.
• webpack.config.js 파일에 entry와 output 정보를 작성한다.

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'app.bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

4. js 파일 번들링 하기

npx webpack

• src 폴더에 있는 js 파일을 번들링한다.
• package.json 파일에 스크립트를 추가해서 번들링을 명령어를 사용할 수 있다. 이제 npm run build 로 번들링을 실행할 수 있다.

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

• 번들링 결과 output으로 지정해준 dist 폴더가 생겼고, dist/app.bundle.js 파일에 웹팩이 uglify, minify를 통해 읽기 어려운 한 줄의 코드로 바꿔놓은 것을 확인할 수 있다.

5. HTML파일 번들링하기 (plugin)

5-1. html-webpack-plugin 설치

npm i -D html-webpack-plugin

5-2. webpack.config.js 파일에 해당 플러그인을 등록

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

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

• template 옵션을 추가해서 기존에 만들어둔 파일을 이용해서 html 번들링 파일을 생성한다.

5-3. npm run build 로 번들링 한다.

5-4. dist 폴더에 index.html 파일이 생성된다.

<script defer="defer" src="app.bundle.js"></script>

• 그리고 파일을 열어보면 위 코드가 추가 되어 있는 것을 볼 수 있다.
• index.html 브라우저에서 실행시켜보면 스타일은 적용되지 않았지만 잘 동작하는 것을 확인할 수 있다.

 

6. CSS 번들링 (loader)

6-1. style-loader 와 css-loader 설치

npm i -D style-loader css-loader

6-2. index.js 파일에서 CSS 파일 임포트

import './style.css";

• index.js파일을 기준으로 css파일을 함께 묶어주는 개념이기때문에 css파일과의 연결 관계도 js파일에 명시되어야 한다(는 것으로 이해했다..)

6-3. webpack.config.js 웹팩 설정 로더 등록

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

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'app.bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module : {
    rules: {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
        exclude: /node_modules/,
    }
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'src', 'index.html'),
    }),
  ],
};

• module.rules 속성에 등록한다.
• test 항목에 정의된 정규식에 매칭되는 파일(확장자가 .css인 파일)은 use 항목에 등록된 로더를 통해서 처리된다.
• 로더는 css-loader가 먼저 적용되고, styled-loader가 적용된다.(순서에 주의)
• exclude 규칙은 필수는 아니다.

6-4. npm run build 로 번들링 한다.
6-5. dist/index.html 파일을 브라우저에서 열어보면 스타일이 적용된 것을 확인 할 수 있다.