Webpack의 구성요소

 

webpack.config.js 파일의 내용

const path = require("path");
const HtmlWebPackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/",
  output: {
    path: path.resolve(__dirname, "build"),
    filename: "webpack_build.js",
  },
  resolve: {
    modules: [path.join(__dirname, "src"), "node_modules"],
    alias: {
        react: path.join(__dirname, "node_modules", "react"),
    },
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: "style-loader",
          },
          {
            loader: "css-loader",
          },
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
    }),
  ],
};

 

 

1. entry

웹팩을 실행하기 위해 자바스크립트 파일이 있는 경로를 뜻한다. src폴더 하위에 있는 자바스크립트 파일들을 웹팩 실행시 사용한다는 뜻이다.

 

2. output

결과물이 저장될 위치를 나타낸다. output하위 옵션에는 path와 filename이 있다.

• path : 웹팩으로 빌드된 파일들이 저장될 경로를 뜻한다.
• filename : 웹팩으로 빌드한 파일의 이름을 지정한다.

현재 내용에서는 build라는 폴더에 webpack_build.js라는 파일도 변환된 파일이 저장된다는 것을 뜻한다.

 

3. resolve

resolve는 노드 모듈을 탐색할 경로를 지정한다. 기본은 node_module로 지정되어져 있다. 웬만해서는 바뀔 일이 없다.

 

4. module

module이라는 옵션 안에는 자바스크립트 파일이 아닌 HTML, CSS 또는 이미지 등을 변환시킬 수 있도록 지정해주는 옵션이다. HTML, CSS 등의 파일들을 변환하기 위해서는 자바스크립트와는 별개로 로더( Loader )가 필요하다.

 

자주사용되는 로더들 : 

• Babel Loader

npm install -D babel-loader
yarn add -D babel-loader

• Css Loader

npm install -D css-loader
yarn add -D css-loader

npm install -D sass-loader
yarn add -D sass-loader

 

로더는 rules라는 배열에 내용들을 추가하면된다.

• test : 로더를 적용할 파일 유형을 나타낸다. 주로 정규 표현식을 사용하여 나타낸다.
• use : 적용할 로더의 이름을 나타낸다. 패키지 매니저를 통해 설치한 것을 넣어주면 된다.

 

5. Plugins

Plugins는 결과물의 모습을 바꿔주는 역할을 한다.

npm install -D html-webpack-plugin
yarn add -D html-webpack-plugin

주로 사용되는 플러그인은 html-webpack-plugin이다. 해당 플러그인은 웹팩으로 빌드된 결과물을 토대로 HTML파일을 생성해준다.

 

const HtmlWebPackPlugin = require("html-webpack-plugin");

require를 통해 가져온 라이브러리를 바탕으로 새로운 객체를 만들어준다.

  plugins: [
    new HtmlWebPackPlugin({ // new 생성자를 통해 해당 객체 생성
      template: "./src/index.html", // 결과물의 형태를 변경할 파일을 html파일을 지정한다.
    }),
  ],