웹팩의 핵심 구성 요소 4가지, 프론트엔드 개발에 꼭 필요한 추가 요소

웹팩의 핵심 구성 요소

 

1. entry

- 웹 애플리케이션이 App.js라는 파일 내부에 선언된 여러 모듈들로 실행이 된다면, App.js 가 웹팩의 Entry 파일인 것. 즉 각 모듈들이 바라보는 최상위 자바스크립트 파일(App.js)을 중심으로 번들링 된다고 보면 됨.

- 선언 방법은 어플리케이션의 루트 경로(node_modules 있는 경로)에 webpack.config.js 파일을 만들고 그 내부에 정의하면 됨.

module.exports = {
	entry: './src/index.js'
}

또한 엔트리 포인트가 2개 이상일 경우도 있음.

entry: {
  login: './src/LoginView.js',
  main: './src/MainView.js'
}

- React나 Vue 프레임워크로 작업한 결과물처럼 SPA가 아니라, 특정 페이지로 진입했을 때 서버에서 해당 정보를 내려주는 형태인 멀티 페이지 애플리케이션에 적합함

 

2. Output

- 번들링된 결과물을 어디에 만들어낼 건지, 그리고 어떤 이름을 만들 건지 정의하는 요소. 

- 객체 형태로 옵션을 추가해야 함

const path = require('path');

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

- 미리 root 디렉터리에 dist 폴더를 만들어두고, bundle.js라는 이름으로 output 지정.

- 최소 filename 은 지정해줘야 하고 일반적으로 bundle.js 파일의 경로인 path 속성을 함께 정의함. 

- path.resolve() 코드는 인자로 넘어온 경로들을 조합하여 유효한 파일 경로를 만들어주는 Node.js API임

 

3. Loader

- 자바스크립트, JSON 파일만 이해하는 웹팩에게, 다양한 타입의 파일을 이해시키도록 해 주는 것.

- 우리가 현재 사용중인 웹 애플리케이션은 js나 json 파일뿐만 아니라  html, css, svg 등의 파일들도 포함하고 있음. 이와 같은 다른 타입의 파일을 변환해주는 것이 로더의 역할임. 또 ES6 형식으로 작성된 자바스크립트 코드를 ES5로 바꿔 컴파일시켜주는 Babel Loader, Vue 파일을 해석해 주는 Vue Loader 등이 있음.

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist')
  },
  module: {
  	rules: []
  }
}

 

- Entry나 output 속성과는 다르게 module 이라는 이름을 사용함.

- 예를 들어 "Error in ./common.css 1: 2 Module parse failed: Unexpected Token (1: 2)"와 같은 에러 메시지의 의미는 웹팩이 css 파일을 해석하기 위해서는 적절한 로더가 필요하다는 말임 그러면 다음과 같이 써주면 됨

  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['css-loader']
      }
    ]
  }

- 가장 일반적인 속성으로는 로더를 적용할 파일 유형을 정규식을 사용해 알려주는 test 속성과, 해당 파일에 적용할 로더의 이름을 알려주는 use 속성이 있음

- 위와 같이 써 주면 해당 프로젝트의 .css 확장자를 갖는 모든 파일에 대해서 css로더를 적용하겠다는 의미임

module: {
  rules: [
    {
      test: /\.scss$/,
      use: ['css-loader', 'sass-loader']
    }
  ]
}

- 만약 scss 파일에 대해 먼저 sass 로더로 전처리한 다음 웹팩에서 css파일을 인식할 수 있게 로더를 적용하고 싶으면 위와 같이 쓰면 됨

- 특정 파일 형식에 대해 여러 로더를 사용하는 경우, 로더가 적용되는 순서는 오른쪽에서 왼쪽 순임

- 웹팩은 엔트리 포인트부터 시작해서 모듈을 검색하다가 .css 파일을 찾으면 css-loader로 처리할 것. 

 

4. Plugin

번들링된 결과물에 대해서 추가로 적용할 수 있는 속성임. 로더는 파일을 해석하고 변환하는 과정에 관여하는 반면, 플러그인은 해당 결과물의 형태를 바꾸는 역할을 함

- 다양한 플러그인이 있는데 예를 들면 번들링 된 js파일에 대한 난독화(UglifyJsPlugin)를 하거나, 번들링 된 css, js 파일들을 html 파일에 주입(html-webpack-plugin)하는 역할 등이 있음.

- 로더와 다르게 플러그인은 클래스로 정의됨. 생성자 함수를 실행해서 넘기는 방식임

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

module.exports = {
        entry: './src/index.js',
        output: {
            filename: 'bundle.js',
            path: path.resolve(__dirname, './dist'),
        },
        module: {
            rules: [
                {
                    test: /\.css$/,
                    use: 'css-loader',
                },
            ],
        },
        plugins: [
            new HtmlWebpackPlugin(),
            new SentryCliPlugin()
        ],
        
}

 

여기까지 entry, output, module, plugins 4개 핵심 속성이고, 이 외에도 프론트엔드 개발에 필수적인 다양한 웹팩 속성이 있음

 

---

필수적인 추가 요소들

5. devServer

- Webpack dev server는 웹 애플리케이션을 개발하는 과정에서 유용하게 쓰이는 도구임

- 웹팩의 필드 대상 파일이 변경되었을 때, 매번 웹팩 명령어를 실행하지 않아도 코드만 바꾸고 저장하면 웹팩으로 빌드한 후 브라우저를 새로고침해줌. (컴퓨터 재웠다 다시 깨운 경우 데브 서버 다시 켜줘야 새로고침이 되더라)

- 명령어 치는 시간, 브라우저 새로고침하는 시간, 웹팩 빌드 시간 줄여주기 때문에 웹 개발에 필수임

 

- 웹팩데브서버는 일반 웹팩 빌드와 다른 점이 있음. 웹팩데브서버를 실행하여 웹팩 빌드를 하는 경우에는, 빌드한 결과물이 파일 탐색기나 프로젝트 폴더에서 보이지 않음.

- 웹팩 데브 서버로 빌드한 결과물은 메모리에 저장되고 파일로 생성하지 않기 때문에, 컴퓨터 내부적으로는 접근할 수 있지만 사람이 직접 눈으로 보고 파일을 조작할 수 없음.

- 따라서 웹팩 데브 서버는 개발할 때만 사용하다가, 개발이 완료되면 웹팩 명령어를 이용해 결과물을 파일로 생성해야 함.

 

*컴퓨터 구조 관점에서 파일 입출력보다 메모리 입출력이 더 빠르고 컴퓨터 자원이 덜 소모됨.

*vue에는 웹팩 데브 서버도 이미 포함되어 있음.

 

- 실무 작업중 항상 필요한 속성이 바로 프록시 설정임

- 프론트엔드 개발 시 API 도메인이 다른 경우 CORS오류가 발생함. 이를 해결하기 위해서는 devServer 속성에 프록시 속성을 설정하면 됨

module.exports = {
  devServer: {
    proxy: {
      '/api': {
      	 target: 'http://ourdomain.com',
         changeOrigin: true
      }
    }
  }
};

- 개발하는 과정에서 실제로 브라우저에서는 http://localhost:8080/api/booking으로 요청했지만, 중간에 프록시 서버 덕분에 API와 같은 도메인인 http://ourdomain.com  같은 도메인으로 요청한 것으로 인식하게 하여 CORS 에러를 해결할 수 있음 

 

6. Source map

- 소스맵은 배포용으로 빌드한 파일과 원본 파일을 서로 연결시키는 기능임

- 서버에 배포할 때 서비스 최적화를 위해 html, css, js 같은 웹 자원들을 압축하는데, 압축해서 배포했더니 에러가 발생한 경우 디버깅을 할 수가 없음

- 소스맵을 이용하면 빌드 이후에도 번들링되기 전의 원본 소스를 볼 수 있어서 디버깅하기 유용함.

module.exports = {
  devServer: {
    proxy: {
      '/api': {
      	 target: 'http://ourdomain.com',
         changeOrigin: true
      }
    }
  },
  devtool: 'source-map'
};

- 소스맵 옵션에 따라 빌드와 재빌드 속도에 차이가 있고 소스맵 생성 범위가 다양하기 때문에 https://webpack.js.org/configuration/devtool/#devtool 에서 원하는 옵션을 골라서 사용하면 됨.

- 그냥 'source-map'는 모든 기능이 포함된 완전한 소스맵을 별도의 파일로 생성함.