webpack

웹팩이란 웹 애플리케이션 개발단계에서 발생하는 자원들을 각각의 모듈로 정의하고 병합된 하나의 결과물로 만드는 빌드 도구이다.
환경구성 nodejs LTS version npm

프로젝트 루트경로에서 명령어실행.

   $ npm init -y

생성된 package.json

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

entry

entry속성에서는 웹자원을 변환하기 위한 js,css 등 파일의 기본설정을 할 수 있다.

'--save-dev' 또는 '-D'는 devDependencies에 추가되고, '--save'또는 '-S'는 dependencies에 추가된다.

   $ npm install webpack webpack-cli --save-dev

npm install 명령어를 이용하여 webpack과 webpack-cli 를 install 한다. 'webpack-cli'는 웹팩설정 과정에서 사용되는 명령어들을 제공하는 모듈이다.

프로젝트 루트경로에 'webpack.config.js'파일을 생성한다.

var path = require('path');

module.exports = {
  entry: './src/index.js',
};

프로젝트 src폴더를 만들고 하위 경로에 'index.js'파일을 생성한다.

//index.js
console.log('webpack test');

추가적으로 'package.json'파일에 scripts속성에 코드를 수정한다.

{
  "name": "jsTest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    //추가부분
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10"
  }
}

'scripts'에 추가된 항목은 npm run 으로 해당 명령어를 사용할수 있다. 'npm run build' 명령어를 실행하면 루트경로 하위에 dist폴더가 생성되며, main.js 파일이 웹팩을 통하여 빌드된 상태로 나타나게 된다.

output

output속성은 빌드된 파일의 이름, 경로등에 설정을 할 수 있다. 'entry'속성과는 다르게 객체 형대로 옵션들을 추가해야 한다.

   output:{
       filename:'bundle.js',
       path: path.resolve(__dirname, './dist')
   }

'webpack.config.js'파일에 위의 내용을 추가한다. 'filename'은 웹팩으로 빌드한 파일의 이름을 의미하고, 'path' 속성은 해당파일의 경로를 의미한다. 마찬가지로 빌드를 실행하여 보면 dist폴더 하위에 bundle.js라는 이름으로 빌드된 js 파일이 생성된다.

'filename'속성에는 이름의 형식을 여러가지 옵션을 이용하여 커스텀할수가 있다.

결과파일이름에 웹팩에서 사용되는 모듈 ID를 부여하는 옵션이다.

   output:{
     filename:'[id].bundle.js'
   }

결과파일이름에 빌드시 발생하는 해시값을 붙이는 옵션.

output: {
  filename: '[hash].bundle.js';
}

결과파일이름에 모듈기준으로 생성된 해시값을 붙이는 옵션.

output: {
  filename: '[chunkhash].bundle.js';
}

Loader

로더(Loader)는 웹팩이 웹 애플리케이션을 해석할 때 자바스크립트 파일이 아닌 웹 자원(HTML, CSS, Images, 폰트 등)들을 변환할 수 있도록 도와주는 속성이다. entry, output속성과는 다르게 module속성에 정의하여 사용한다. 웹팩을 이용하여 빌드를 하게 되면 css, font, img 등 웹자원에 대하여 적절한 loader추가하여 빌드를 진행하여야지만 에러가 발생하지 않는다.
CSS Loader
Babel Loader
Vue Loader
File Loader
TS Loader
SASS Loader 등이 있으며, 사용법에 대해서는 나중에 따로 정리가 필요한 부분이다.

기본설정문법.

    module.exports = {
        module:{
            rules:[
                ......
            ]
        }
    }

Loader를 여러개 사용하는 경우 rules 배열에 로더옵션을 추가한다.

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.sass$/, use: 'sass-loader' },
      // ...
    ],
  },
};

Loader는 기본적 오른쪽에서 왼쪽순으로 적용된다.

module: {
  rules: [
    {
      test: /\.scss$/,
      use: ['css-loader', 'sass-loader'],
    },
  ];
}

위의 코드를 정리하면, scss파일에 먼저 sass로더로 scss파일을 css파일로 변환작업이 이루어지고 그다음에 웹팩에서 css파일을 인식할 수 있게 css로더를 적용하는 코드이다. 웹팩빌드를 실행하였을때 css파일의 내용들이 HTML인라인 style태그로 추가되는것을 원한다면 style로더를 추가할수있다.

    {
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader']
    }

위와 같이 배열형식으로 입력할 수도 있고, 아래와 같이 옵션을 포함한 형태로도 입력할 수 있다.

module: {
  rules: [
    {
      test: /\.css$/,
      use: [
        { loader: 'style-loader' },
        {
          loader: 'css-loader',
          options: { modules: true },
        },
        { loader: 'sass-loader' },
      ],
    },
  ];
}

Plugin

플러그인 속성은 웹팩의 추가적인 기능을 제공하는 속성이다. 빌드결과물의 형태를 바꾸는 역할을 해준다.

    module.exports: {
        plugins:[]
    }

// webpack.config.js
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [new HtmlWebpackPlugin(), new webpack.ProgressPlugin()],
};

플러그인은 repuire()함수를 사용하여 생성된 객체인스턴스만 추가 될수 있다.

HTMLWebpackPlugin : 웹팩으로 빌드한 결과물로 HTML파일을 생성해주는 플러그인
ProgressPlugin : 웹팩의 빌드 진행율을 표시해주는 플러그인.

split-chunks-plugin, clean-webpack-plugin, image-webpack-loader, webpack-bundle-analyzer-plugin

참고 : 웹팩 핸드북, webpack.js.org