webpack 기본

[jerrybabah]

설치

$ yarn add --dev webpack webpack-cli

• webpack4부터 webpack 명령을 사용하기 위해서 webpack-cli도 함께 설치해야 한다.

웹팩의 역할

entry 파일을 시작으로 dependency graph를 만들어 프로젝트의 모든 모듈을 몇 개의 번들 파일로 만든다.

• 웹 페이지, 웹 개발의 아주 원초적인 모습을 생각해보라
• index.html 파일이 있고 거기서 css 파일을 link 태그를 통해서 참조하거나, style 태그 안에 css 문법을 쓴다.
• script 태그를 통해서 js 파일을 참조하거나 javascript 코드를 작성하기도 한다.
• ⇒ 페이지마다 html 파일이 있고, 여기서 필요한 css, js를 참조한다.
• 그런데 지금의 웹 개발은 이런식으로 하지 않는다. SPA라는 기술이 생기고, 파일을 모듈화시킬 수 있게 됐다.
• SPA든, 서버 사이드 렌더링이든, 필요에 따라, 원하는 대로 프로젝트를 구성하고 관심사를 분리하고 할 수 있다.
• ⇒ 자유로운 구조, MVC 패턴, flux패턴 등, 자유로운 디자인 패턴으로 프로젝트를 구성할 수 있다.
• 이 때, 웹팩의 역할은 프로젝트의 dependency graph를 그리고 압축된 파일 몇 개로 만들어 준다.
• ⇒ js, ts, jsx, vue, sass, css 등을 html, css, js로 만들어줌

webpack.config.js 예시

const path = require('path');

const HTMLWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
    // chunkFilename: 'chunk.js',
    // publicPath: '/',
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
      {
        test: /\.(js|ts)$/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
  plugins: [
    new HTMLWebpackPlugin({
      template: './public/index.html',
    }),
    new MiniCssExtractPlugin({
      fileName: 'style.css',
    }),
  ],
}

기본 개념

entry

{
  entry: string,
}

• dependency graph를 그릴 때, 가장 부모 요소가 될 모듈을 웹팩에게 알려주는 역할
• 문자열로 지정하면 됨
• 웹팩은 기본적으로 javascript와 json 파일만 읽을 수 있기 때문에 entry 파일로 js가 아닐 경우 적절한 로더가 있어야 함.
• SPA라면 하나의 entry를 가질 것이다.
• 여러 entry를 가질 수 있다. (요거에 대해선 아직 경험, 지식이 없음)

output

{
  output: {
    path: string,
    filename: string,
  },
}

• dependency graph를 모두 그리고, 번들된 파일을 어디에 둘 것인지 웹팩에게 알려줌
• 객체를 가진다.
• path 프로퍼티로 번들된 파일이 위치하게 될 디렉토리를 지정
• filename으로 번들된 파일의 파일명을 지정 (js로만 되는거 같다(?))

module

{
  module: {
    rules: [
      // loader
      {
        test: RegExp,
        use: string | string[] | { loader: string, options: object },
      },
    ],
  },
}

• 웹팩은 javascript와 json만 읽을 줄 안다. 다른 파일을 읽기 위해서는 loader를 추가해야 한다. 여기서 loader를 추가할 수 있다.
• 모듈 밑에는 rules라는 프로퍼티만 가질 수 있는 것 같다.
• rules는 loader config 객체의 array를 가진다.
• loader는 test, use 프로퍼티를 갖는다.
• test 프로퍼티는 문자열이 아닌 정규표현식으로 나타내며, 파일 확장자를 나타내면 된다.
• use는 어떤 loader를 사용할 지 알려주면 된다. (문자열 또는 문자열의 배열 또는 객체로 표현)

plugins

{
  plugins: [
    new InstalledPlugins({...options}),
  ],
}

• 플러그인은 loader와는 다르게 좀 더 넓은 범위의 일을 수행한다.
• 번들링 최적화, 환경 변수 삽입 등
• 설치한 플러그인을 초기화하여 plugins 배열에 넣으면 된다.
• 초기화시, 각 플러그인마다 필요한 option 객체를 넣어 설정할 수도 있다.