10. 뷰 개발을 위한 웹팩 (Webpack)

# 웹팩 (Webpack) : 모듈 번들러. 파일 간의 연관 관계를 파악하여 하나의 자바스크립트 파일로 변환해주는 변환 도구이다.

​

→ 취지 : 애플리케이션 동작과 관련된 여러 개의 파일 (HTML, CSS, 자바스크립트, 이미지 등)들을 1개의 자바스크립트 파일 안에 다 넣어버리고,

해당 자바스크립트 파일 하나만 로딩해도 웹 앱이 돌아가게 하자!

​

→ HTTP 요청의 수를 줄여 웹 화면 로딩 시간을 줄이기 위함이다!

​

# 웹팩의 주요 속성

속성	설명
entry	웹팩으로 빌드(변환)할 대상 파일을 지정하는 속성. entry 로 지정한 파일의 내용에는 전체 애플리케이션 로직과 필요 라이브러리를 로딩하는 로직이 들어간다.
output	웹팩으로 빌드한 결과물의 위치와 파일 이름 등 세부 옵션을 설정하는 속성.
loader	웹팩으로 빌드할 때 HTML, CSS, PNG 파일 등을 자바스크립트로 변환하기 위해 필요한 설정을 정의하는 속성.
plugin	웹팩으로 빌드하고 나온 결과물에 대해 추가 기능을 제공하는 속성. 가령, 결과물의 사이즈를 줄이거나 결과물 (기본적으로 JavaScript) 을 기타 CSS, HTML 파일로 분리하는 기능 등
resolve	웹팩으로 빌드할 때 해당 파일이 어떻게 해석되는지 정의하는 속성. 가령, 특정 라이브러리를 로딩할 때 버전은 어떤 걸로 하고, 파일 경로는 어디로 지정하는지 등을 정의

 

 

# 웹팩 데브 서버 (webpack-dev-server) : 웹팩 설정 파일의 변화를 감지하여 빠르게 웹팩을 빌드할 수 있도록 지원하는 유틸리티 혹은 Node.js 서버

​

웹팩 데브 서버는 npm run dev 명령을 실행했을 때에 빌드한 파일은 파일 시스템에 저장하지 않고 컴퓨터 메모리에만 저장한다.

→ 파일을 쓰고 읽는 시간보다 메모리에 저장하고 읽는 시간이 더 빠르기 때문

→ 웹팩 데브 서버는 인 메모리 (in memory) 기반!

​

# npm run dev 실행

→ webpack.config.js 내용에 따라 파일(.vue 등)을 웹팩으로 빌드

 

webpack.config.js 파일 뜯어보기

 

# 파일 경로와 웹팩 라이브러리 로딩

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

path : output 속성에서 사용할 노드 path 라이브러리

webpack : 웹팩 플러그인에서 사용할 node_modules 의 웹팩 라이브러리

​

# entry 속성

entry: './src/main.js'

웹팩으로 빌드할 파일을 src/main.js 파일로 지정한다. main.js 파일에 정의한 내용에 따라 애플리케이션의 구성요소 및 파일들이 웹팩으로 번들링 (빌드)된다.

 

src/main.js

# output 속성

output: {
  path: path.resolve(__dirname, './dist'),
  publicPath: '/dist/',
  filename: 'build.js'
}

웹팩으로 빌드하고 난 결과물의 파일의 위치와 이름을 지정한다. 결과물 파일의 위치는 dist/build.js 이다.

​

# module 속성

  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      },      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },

(1) css 파일에 vue-style-loader 와 css-loader 를 적용한다.

css-loader 를 적용해서 css 파일 → javascript 파일로 변환

그리고 이렇게 변환된 css 속성들이 vue-style-loader 를 거쳐 index.html 에 <style> 태그로 삽입된다.

​

(2) vue 파일에는 vue-loader 를 적용한다.

vue 파일의 <template>, <script>, <style> 등의 내용 → javascript 로 변환되어 웹팩 빌드 결과물에 포함된다.

​

(3) js 파일에 babel-loader 를 적용한다.

js 파일의 ES6 문법을 모든 브라우저에서 호환 가능한 자바스크립트로 변환(transpile) 한다.

​

(4) 이미지 파일들은 file-loader 를 이용하여 이미지 → javascript 로 변환한다.

​

# resolve 속성

  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },

웹팩으로 빌드할 때 어떤 유형의 뷰 라이브러리를 선택할지 지정한다. 여기서 설정된 vue.esm.js 는 최신 웹팩 버전과 사용할 수 있는 Full 버전의 라이브러리이며, 이렇게 별도로 설정하지 않으면 런타임 버전인 vue.runtime.esm.js 를 사용한다.

​

# devServer 속성

  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },

웹팩 데브 서버 관련 속성을 지정한다.

​

(1) historyApiFallback : 클라이언트 사이드 라우팅인 '뷰 라우터'와 함께 사용하기 위해 true 로 지정한다.

URL 이외의 URL 의 경로로 접근했을 때 404 reponse 를 받게 되는데, 이때 index.html 을 fallback 할지 결정하는 옵션이다. 이 기능을 이용하면 미지정 경로로 이동했을 때 해당 상태에 맞는 적절한 경로로 이동할 수 있다.

​

(2) noInfo : 처음 서버를 시작할 때만 웹팩 빌드 정보를 보여주고, 이후 변경 시에는 빌드 정보를 보여주지 않는다.

​

(3) overlay : 웹팩으로 빌드할 때 오류가 있으면 브라우저 화면 전체에 오류를 표시한다.

​

# performance 속성

  performance: {
    hints: false
  },

웹팩으로 빌드한 파일의 크기가 250KB 를 넘으면 경고 메시지를 표시할지 말지를 결정한다. 여기서는 false 이므로 크기와 관계없이 경고가 표시되지 않는다.

​

# devtool 속성

devtool: '#eval-source-map'

웹팩에서 빌드된 파일로 웹 앱을 구동했을 때 개발자 도구에서 사용할 디버깅 방식을 지정한다.

​

# 배포할 때 옵션

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map' 
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

애플리케이션의 기능과 화면을 구현한 후 최종적으로 사용자나 사이트에 배포할 때 애플리케이션의 성능 향상을 위해 추가한 설정이다.

​

module.exports.devtool = '#source-map'

→ 개발자도구 분석옵션을 #source-map 으로 지정한다.

​

new webpack.optimize.UglifyJsPlugin({

→ 자바스크립트 파일의 크기를 줄이는 Uglify 플러그인을 설정한다.

​

new webpack.DefinePlugin({

'process.env': {

NODE_ENV: '"production"'

}

}),

new we

→ 환경변수를 설정한다.

​

# npm run build 또는 npm run dev 로 웹팩 빌드

→ 파일(모듈) 간의 관계에(순서) 따라 build.js 파일 생성

​

따라서, index.html 파일에서 웹팩으로 빌드한 build.js 만 로딩하면, 애플리케이션 로직을 구성하는 vue 파일, png 파일, 자바스크립트 라이브러리를 로딩한 것과 같다.