Webpack의 주요 속성

웹팩의 주요 속성 4가지를 도식으로 나타내면 아래 그림과 같다.

1. Entry : Webpack을 실행할 대상 file 즉, 진입점

2. Output : Webpack의 결과물에 대한 정보를 입력하는 속성. 일반적으로 filename과 path를 정의

3. Loader : JS파일이 아닌 CSS, 이미지 같은 파일을 웹팩이 인식하게 해주는 속성. 오른쪽에서 왼쪽 순으로 적용

4. Plugin : Webpack으로 변환한 파일에 추가적인 기능을 더하고 싶을 때 사용하는 속성. Webpack의 전반적인 제어권을 가지고 있다.

 

아래는 전체적인 Webpack 예시이다.

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js', 						// 대상파일의 경로
  output: { 									// 결과 파일의 정보
    path: path.resolve(__dirname, './dist'),	// 결과 파일 저장 경로
    publicPath: '/dist/', 						// cdn파일을 배포할때 포함되게 하는 속성
    filename: 'build.js' 						// 빌드 결과 fileName
  },
  module: {
    rules: [
      {
        test: /\.css$/,							// css 파일
        use: [
          'vue-style-loader',					 
          'css-loader'							// css 파일 읽게 하는 모듈
        ],
      },      
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',					// js의 문법을 여러 브라우저에 호환하는 모듈
        exclude: /node_modules/					// 라이브러리는 바벨 변환 필요없음
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {									// 파일간의 해석 방식을 정의
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']	// 작성된 확장자는 신경안써도된다.
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

 

[출처: https://joshua1988.github.io/webpack-guide/concepts/wrapup.html#concepts-review]