Webpack Core Concepts

Webpack Core Concepts

Webpack 은 Modern JavaScript Application을위한 정적 모듈 번들러입니다 . Webpack은 애플리케이션에 필요한 모든 모듈을 매핑하고 하나 이상의 번들을 생성 하는 종속성 그래프 를 내부적으로 빌드합니다.

Module

과거의 독립적인 작업을 하던 Javascript 코드들과 다르게 Modern Javascript에서는 브라우저에서 실행되고 있는 완전한 애플리케이션을 실행할 수 있을 뿐아니라, Node.js와 같이 다른 컨텍스트에서 Javascript를 사용하기도 합니다.

따라서 Javascript 프로그램을 필요에 따라 가져올 수 있도록 별도의 모듈로 분할하고자하였고 Modular Programming 관점에서, 개발자들이 프로그램을 기능적으로 나눈 덩어리를 모듈이라고 합니다.

Example

Exporting module features

export 문을 배치하여, 모듈 밖으로 항목들을 내보냅니다.

​x
export const name = 'square';
​
export function draw(ctx, length, x, y, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, length, length);
​
  return {
    length: length,
    x: x,
    y: y,
    color: color
  };
}

function , var , let , const , class 를 내보낼 수 있지만, 최상위 항목이여야합니다.

(함수안에서 export 를 사용할 수는 없습니다.)

여러 항목을 내보내는 더 편리한 방법은 모듈 파일 끝에 하나의 export 를 사용하는 것입니다.

xxxxxxxxxx
export { name, draw, reportArea, reportPerimeter };

Importing features into yout script

export 를 사용하여 내보낸 후, 우리가 사용할 스크립트로 가져오는 방법은 다음과 같습니다.

xxxxxxxxxx
import { name, draw, reportArea, reportPerimeter } from './modules/square.js';

Default exports versus named exports

지금까지의 named exports 와 다르게, default export를 사용해봅시다.

xxxxxxxxxx
export default randomSquare;

익명함수의 경우에는 아래와 같이 사용합니다.

xxxxxxxxxx
export default function(ctx) {
  ...
}

import하는 경우에는 다음과 같이 사용합니다.

xxxxxxxxxx
import randomSquare from './modules/square.js';
import {default as randomSquare} from './modules/square.js';

Concepts

Webpack의 Core Concepts 중 이해해야할 내용의 목록은 다음과 같습니다.

• Entry
• Output
• Loaders
• Plugins
• Mode
• Browser Compatibility

Entry

Entry point는 Webpack이 내부의 dependency graph에 따라 빌드를 시작하는 곳을 가리킵니다.

이를 통해 Webpack은 다른 모듈들과 다른 라이브러리들의 의존관계를 파악합니다.

default는 ./src/index.js 이지만 설정에 따라 바꿀 수 있습니다.

webpack.config.js

xxxxxxxxxx
module.exports = {
  entry: './path/to/my/entry/file.js'
};

Single Entry (Shorthand) Syntax

Usage: entry: string | [string]

xxxxxxxxxx
module.exports = {
  entry: './path/to/my/entry/file.js'
};
​
module.exports = {
  entry: {
    main: './path/to/my/entry/file.js'
  }
};

Object Syntax

Usage: entry: { <entryChunkName> string | [string] }

xxxxxxxxxx
module.exports = {
  entry: {
    app: './src/app.js',
    adminApp: './src/adminApp.js'
  }
};

Output

Output 의 속성들은 Webpack이 어디에 번들한 것들을 생성할건지, 그리고 어떻게 이름지을지를 정합니다.

default는 ./dist/main.js 에 main output 파일이 생성되고 ./dist 폴더에 다른 생성파일이 추가됩니다.

output.publicPath

xxxxxxxxxx
This is an important option when using on-demand-loading or loading external resources like images, files, etc. If an incorrect value is specified you'll receive 404 errors while loading these resources.
​
This option specifies the public URL of the output directory when referenced in a browser. A relative URL is resolved relative to the HTML page (or <base> tag). Server-relative URLs, protocol-relative URLs or absolute URLs are also possible and sometimes required, i. e. when hosting assets on a CDN.
​
The value of the option is prefixed to every URL created by the runtime or loaders. Because of this the value of this option ends with / in most cases.

webpack.config.js

xxxxxxxxxx
const path = require('path');
​
module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

위 예제에서 사용된 path 는 Node.js 의 모듈입니다.

Loaders

Webpack은 Javascript 혹은 JSON 파일들만 사용가능하지만, Loader는 다른타입의 파일들도 application내에서 사용할 수 있도록 해줍니다.

Webpack의 test 와 use 속성은 다음과 같은 설정이 가능하게 합니다.

• test: 변환할 파일을 식별합니다.
• use: 변환을 수행하는데 사용해야하는 Loader를 나타냅니다.

webpack.config.js

xxxxxxxxxx
const path = require('path');
​
module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
            { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' }
    ]
  }
};

Plugins

Plugin은 번들 최적화, 주입, asset 관리와 주입 같은 여러분야에 활용할 수 있습니다.

webpack.config.js

xxxxxxxxxx
const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins
​
module.exports = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

Mode

mode의 파라미터로는 development , production , none 이 올 수 있습니다. 이 세 파라미터는 각각의 환경에 맞게 Webpack을 최적화해줍니다.

default는 production 입니다.

xxxxxxxxxx
module.exports = {
  mode: 'production'
};

참고자료

• Webpack Concepts: https://webpack.js.org/concepts/
• MDN Modules: https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Modules