1. Entry(엔트리)

---

• Entry 속성은 Entry point라고도 하며, webpack이 내부의 디펜던시 그래프를 생성하기 위해 사용해야 하는 모듈이다.

• Webpack은 엔트리 포인트가 (직간접적으로) 의존하는 다른 모듈과 라이브러리를 찾아낸다.

1) Entry point가 1개일 때

//기본 값
module.exports = {
  entry: "./src/index.js",
};

//지정 값
module.exports = {
  entry: "./src/script.js",
};

2) Entry point가 여러 개일 때

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

2. Output(출력)

---

• Output 속성은 생성된 번들을 내보낼 위치와 이 파일의 이름을 지정하는 방법을 webpack에 알려주는 역할을 한다.

• 기본 출력 파일의 경우에는 ./dist/main.js로, 생성된 기타 파일의 경우에는 ./dist 폴더로 설정된다.

• 아래에서는 output.filename과 output.path 속성을 사용하여 webpack에 번들의 이름과 내보낼 위치를 알려주고 있다. path 속성을 사용할 때는 path 모듈을 사용해야 한다.

const path = require('path');

module.exports = {
  output: {
    path: path.resolve(__dirname, "docs"), // 절대 경로로 설정을 해야 한다. 
    filename: "app.bundle.js",
  },
};

1) clean 옵션

• 해당 경로에 파일명을 바꿔서 script.js를 설치하게 되면 기존에 있던 app.bundle.js는 그대로 있고, 추가적으로 app.js가 설치되기 때문에 app.bundle.js를 직접 삭제해주어야 한다.

• 그러나 clean: true 옵션을 주고 다시 번들링을 해보면 이전의 app.bundle.js 파일이 자동으로 삭제되어 있는 것을 확인할 수 있다. 즉, 새로운 번들링 파일 생성 시 이전에 번들링 했던 파일을 자동으로 삭제하는 기능이다.

const path = require('path');

module.exports = {
  entry: './src/script.js',
  output: {
    path: path.resolve(__dirname, "docs"),
    filename: "app.bundle.js",  // <- 기존 파일명
  },
};

const path = require('path');

module.exports = {
  entry: './src/script.js',
  output: {
    path: path.resolve(__dirname, "docs"),
    filename: "app.js",  // <- 변경한 파일명
    clean: true  // <- clean 옵션 지정
  },
};

2) output 동적 생성

---

• output의 filename에서 app.bundle.js를 [name].bundle.js로 바꿔주면 webpack이 이름을 동적으로 생성해준다.

3. Loaders(로더)

---

• Webpack은 기본적으로 JavaScript와 JSON 파일만 이해한다. 그러나 loader를 사용하면 Webpack이 다른 유형의 파일을 처리하거나, 그들을 유효한 모듈로 변환해 애플리케이션에 사용하거나 디펜던시 그래프에 추가할 수 있다.

• 속성을 넣어 규칙을 정하기 위해서는 module.rules 아래에 배열로 정의해야 한다. 그냥 rules 아래에 정의하면 webpack은 경고를 띄운다.

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"],
                exclude: /node_modules/,
            },
        ],
    },
};

• 상위 수준에서 loader는 webpack 설정에 몇 가지 속성을 가진다.
  • test : 변환이 필요한 파일들을 식별하기 위한 속성(필수)
  • use : 변환을 수행하는데 사용되는 로더를 가리키는 속성(필수)
  • exclude : 바벨로 컴파일하지 않을 파일이나 폴더를 지정. (반대로 include 속성을 이용해 반드시 컴파일해야 할 파일이나 폴더 지정 가능)

4. Plugins(플러그인)

---

• Plugins를 사용하면 번들을 최적화하거나 에셋을 관리하고, 또는 환경변수 주입 등의 광범위한 작업을 수행할 수 있게 된다.

• 플러그인을 사용하기 위해서는 require()를 통해 플러그인을 먼저 요청해야 한다. 그리고 plugins 배열에 사용하고자 하는 플러그인을 추가해야 한다.

• 대부분의 플러그인은 사용자가 옵션을 통해 지정할 수 있다. 다른 목적으로 플러그인을 여러 번 사용하도록 설정할 수 있기 때문에 new 연산자를 사용해 호출하여 플러그인의 인스턴스를 만들어줘야 한다.

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, "src", "index.html")
        })
    ],
};

1) mini-css-extract-plugin

• mini-css-extract-plugin은 CSS 파일을 별도 파일로 추출(extract)한다.

• style-loader와 함께 사용이 불가능하다.

• mini-css-extract-plugin은 JavaScript 파일 안에서 호출되는 스타일 코드를 청크(Chunk)에서 파일로 추출하므로 개발 중에는 플러그인을 사용하지 않는 것이 좋다. 즉, 개발이 끝난 후 배포 할 때 사용한다.

• 개발 모드에서는 CSS를 여러 번 수정하고 DOM에 <style> 요소의 코드로 주입하는 것이 훨씬 빨리 작동하므로 style-loader를 사용하고, 배포 모드에서는 mini-css-extract-plugin를 사용한다.

1-1. 플러그인 설치

• 아래 명령어로 mini-css-extract-plugin를 설치한다.

npm install --save-dev mini-css-extract-plugin

1-2. webpack.config.js에 플러그인 설정

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

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, "css-loader"],
                exclude: /node_modules/,
            },
        ],
    },
    plugins: [
        new MiniCssExtractPlugin()
    ]
};

2) css-minimizer-webpack-plugin

• mini-css-extract-plugin은 cssnano를 사용해 CSS를 최적화(압축)시킨다.

1-1. 플러그인 설치

• 아래 명령어로 css-minimizer-webpack-plugin를 설치한다.

npm install css-minimizer-webpack-plugin --save-dev

1-2. webpack.config.js에 플러그인 설정

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerWebpackPlugin = require(`mini-css-extract-plugin`);

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, "css-loader"],
                exclude: /node_modules/,
            },
        ],
    },
    plugins: [
        new MiniCssExtractPlugin()
    ],
    optimization: {
        minimizer: [
            new CssMinimizerWebpackPlugin()
        ]
    },
};

5. Mode(모드)

---

• mode 파라미터를 development, production 또는 none으로 설정하면 webpack에 내장된 환경별 최적화를 활성화 할 수 있다. 기본값은 production 이다.

// development
module.exports = {
    mode: 'development',
};

// production
module.exports = {
    mode: 'production',
};

// none
module.exports = {
    mode: 'none',
};

• webpack.config.js 안의 mode 변수에 따라 동작을 변경하려면, 객체 대신 함수를 export 해야 한다.

var config = {
  entry: './app.js',
  //...
};

module.exports = (env, argv) => {
  if (argv.mode === 'development') {
    config.devtool = 'source-map';
  }

  if (argv.mode === 'production') {
    //...
  }

  return config;
};

6. Optimization(최적화)

---

• Webpack은 버전 4부터는 선택한 항목에 따라 최적화를 실행한다.

module.exports = {
    optimization: {
        minimizer: [
            new CssMinimizerPlugin(),
        ]
    }
};

1) minimize

• TerserPlugin 또는 optimization.minimize에 명시된 plugins로 bundle 파일을 최소화(=압축)시키는 작업 여부를 결정한다.

2) minimizer

• defualt minimizer을 커스텀된 TerserPlugin 인스턴스를 제공해서 재정의할 수 있다.

7. Target

---

• Webpack은 다양한 환경과 target을 컴파일하며, target의 기본값은 web이다. 적용하지 않으면 이 기본 값으로 적용된다.

• 이 부분에는 web 외에도 다양한 환경을 컴파일 할 수 있는데, esX를 넣으면 지정된 ECMAScript 버전으로 컴파일할 수 있다.

module.exports = {
    target: ["web", "es5"],
};