22.11.27 : CRA없이 프로젝트 생성하기-5 (webpack dev server, webpack.config.js 살펴보기)

Reference :  캡틴판교님 강의, 웹팩 핸드북

 

 

Webpack Dev Server

 

웹팩 데브 서버는 웹 애플리케이션을 개발하는 과정에서 유용하게 쓰임. 웹팩 빌드 대상 파일이 변경되었을 때 매번 웹팩 명령어를 실행하지  않아도 코드 변경 후 저장하면 웹팩으로 빌드 후 브라우저를 새로고침 해준다.

매번 명령어 치지 않아도 되고 새로고침과, 웹팩 빌드하는 시간을 줄여줘서 웹팩 기반의 웹 애플리케이션 개발에 필수로 사용된다.

 

웹팩 데브 서버의 특징

 

일반 웹팩 빌드와 다른 특징이 있음.

// package.json

"scripts": {
  "dev": "webpack-dev-server",
  "build": "webpack"
}

 

빌드한 결과물이 파일 탐색기나 프로젝트 폴더에서 보이지 않는다. 웹팩 데브 서버로 빌드한 결과물을 메모리에 저장되고 파일로 생성하지는 않아서 컴퓨터 내부적으로 접근은 가능하나 사람이 직접 눈으로 보고 파일을 조작할 순 없다.

 

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

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

 

 

연습

 

webpack.config.js 분석 해보기

 

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

module.exports = {
  mode: 'production', // webpack version 4에서 설정이 간소화되었다
  entry: './src/main.js',  // 웹팩 변환 대상파일
  output: {                // 변환한 결과파일의 정보가 담기는 속성명
    path: path.resolve(__dirname, './dist'),  // resolve API이용해 dist폴더 밑
    publicPath: '/dist/',                     // 나중에 CDN 배포시 CDN 주소에 포함될 수 있게끔 속성 정의
    filename: 'build.js'                      // 변환한 결과 파일
  },
  module: {                // 로더의 속성 정의
    rules: [               
      {
        test: /\.css$/,       // 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]' // 웹팩에서 인식 할수 있게 옵션주기
        }
      }
    ]
  },
  resolve: {        // 웹팩에서 파일의 연관 관계들을 해석해 나갈때, 파일의 해석방식 정의
    alias: {        
      'vue$': 'vue/dist/vue.esm.js'   // vue$ 는 vue/dist/vue.esm.js 로 해석하겠다~
    },
    extensions: ['*', '.js', '.vue', '.json']      // e.g. import {} from './math.js' 이면 .js 안써도 내가 해석 해주겠다. 저기 있는 확장자는 내가 해석 해주겠다 
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}


// webpack ver.3에서는 mode: 'production'이 아닌 추가로 아래의 정의를 해주어야 했음

// if (process.env.NODE_ENV === 'production') {          // node.js 실행 환경변수를 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({   // js 용량 줄이기 위해서 씀
//       sourceMap: true,
//       compress: {
//         warnings: false
//       }
//     }),
//     new webpack.LoaderOptionsPlugin({
//       minimize: true
//     })
//   ])
// }