[WEBPACK] 웹팩 번들링(bundling)

# 개발환경 os : windows 10 pro 64bit php : 7.4.2 node : 13.2.0 npm : 6.13.1

 

0. 디렉토리 구조

 

1. 번들작업 패키지, 웹팩 터미널 도구 설치

 

  [terminal] npm install -D webpack webpack-cli

 

  1.1. webpack, webpack-cli 사용방법

    /root/node_modules/.bin

# /root/node_modules/.bin [terminal] webpack --help [terminal] webpack-cli --help

 

  1.2. 핵심 3가지(--mode, --entry, --output)

옵션	설명
--mode	웹팩 실행모드, 현 포스팅에서는 개발버전인 dev or development를 지정
--entry	엔트리 포인트(시작점) 경로를 지정
--output	번들링한 하나의 결과물이 위치하는 경로

 

  1.3. 번들링 명령어 실행

# /root/ [terminal] webpack --mode development --entry ./src/app.js --output dist/main.js

  : 결과 > /root에 dist 디렉토리가 생성되고 하위에 main.js 파일이 만들어짐

 

 

  1.4. webpack 설정파일 생성

    1.4.1. /root/webpack.config.js 파일 생성

/*
* /root/webpack.config.js
*/

const path = require('path');

module.exports = {
    mode: 'development',
    entry: {
        main: './src/app.js'
    },
    output: {
        filename: '[name].js',
        path: path.resolve('./dist'),
    },
}

    1.4.2. webpack 실행 npm 명령어 추가 [build] 부분

/*
* /root/package.json
*/

{
  "name": "frontend",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "./node_modules/.bin/webpack"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.19.2"
  },
  "devDependencies": {
    "webpack": "^4.41.6",
    "webpack-cli": "^3.3.11"
  }
}

 

   1.4.3. [terminal] webpack

     : 모든 설정 옵션을 webpack.config.js에 작성했기 때문에 webpack 명령어만 실행해도 됨

      이후부터는 1.4.1.의 명령어처럼 길게 작성할 필요 없이 npm run build 명령을 통해서 지시 가능

 

 

 

[참고] https://github.com/jeonghwan-kim/lecture-frontend-dev-env