webpack 시도

webpack 사용

package.json 만들기

npm의 init 명령을 만듭니다. y 옵션을 붙이면 모두 초기 설정으로 package.json이 작성된다.

$ npm init -y

package.json

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

또는 yarn init -y

gitignore 추가

gibo의 Node를 사용.

$ gibo dump Node > .gitignore

webpack 설치

yarn 사용. webpack과 webpack-cli를 설치. -D 옵션을 붙이는 것으로 개발 환경만 인스톨 되도록(듯이) 한다.

$ yarn add -D webpack webpack-cli

빌드

webpack 명령으로 빌드할 수 있다.
기본적으로 src/index.js를 dist/main.js로 빌드합니다.

src/index.js

console.log('hoge')

webpack 실행. mode를 지정하지 않았기 때문에 경고가 나온다.

$ npx webpack
asset main.js 20 bytes [emitted] [minimized] (name: main)
./src/index.js 19 bytes [built] [code generated]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

webpack 5.11.0 compiled with 1 warning in 143 ms

dist/main.js

console.log("hoge");

js 번들

hoge 모듈을 준비하고 번들한다.

src/modules/hoge.js

const a = () => {
    console.log('a')
}

export default a

src/index.js

import a from "./modules/hoge";

console.log('hoge')

a();

development 모드로 빌드한다.

$ npx webpack --mode=development
asset main.js 4.13 KiB [emitted] (name: main)
runtime modules 668 bytes 3 modules
cacheable modules 117 bytes
  ./src/index.js 58 bytes [built] [code generated]
  ./src/modules/hoge.js 59 bytes [built] [code generated]
webpack 5.11.0 compiled successfully in 65 ms

결과. development 모드라면 번들은 되지 않는 것 같다.



production 모드로 빌드하면 main.js에 번들되어 1 파일로 완결하게 되었다.

$ npx webpack --mode=production 
asset main.js 60 bytes [emitted] [minimized] (name: main)
orphan modules 59 bytes [orphan] 1 module
./src/index.js + 1 modules 117 bytes [built] [code generated]
webpack 5.11.0 compiled successfully in 153 ms

webpack 설정 작성

webpack.config.js에 설정을 작성합니다.
entory로 읽을 파일을 지정하고 output으로 내보낼 파일을 지정합니다.

webpack.config.js

const path = require('path')
module.exports = {
  entry: path.resolve(__dirname, 'src', 'index.js'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
  }
}