폴시랩

Webpack v2 #1 간단하게 살펴보기

Explanation

webpack3 버전이 릴리즈 된지도 어느덧 수개월이 지나 이미 4버전 알파가 올라오고 있는 시점이지만.. 아직 서비스 중인 프로젝트는 2버전을 사용하고 있어서 3, 4 버전을 알아보기 전에 2버전의 내용을 간단하게나마 정리해보려 합니다.
예제 코드: https://github.com/falsy/blog-post-example/tree/master/webpack2-quickstart
(예제 코드라고 할것도 없지만..)

1. 패키지 설정 및 설치

1-1. init

$ npm init

1-2. webpack 설치

2버전 마지막인 2.6.1 버전을 설치합니다.

$ npm install webpack@2.6.1 --save-dev

1-3. 빌드를 테스트할 개발 서버 설치

$ npm install webpack-dev-server --save-dev

1-4. html-webpack-plugin 플러그인 설치

$ npm install html-webpack-plugin --save-dev

1-5 예시

// package.json
{
  "name": "cheolguso-webpack2",
  "version": "1.0.0",
  "description": "webpack version2 guide",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "CHEOLGUSO",
  "license": "WTFPL",
  "devDependencies": {
    "html-webpack-plugin": "^2.30.1",
    "webpack": "^2.6.1",
    "webpack-dev-server": "^2.11.1"
  }
}

2. webpack 설정

2-1. index.html

$ vi index.html
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>cheolguso : webpack version2 guide</title>
  </head>
  <body>
    hello
  </body>
</html>

2-2. index.js

$ vi index.js
document.write(' world');

2-3. webpack.config.js

$ vi webpack.config.js
'use strict';

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = function makeWebpackConfig() {
  var config = {};
  
  config.entry = {
    app: './index.js',
  };

  config.output = {
    path: __dirname + '/build',
    filename: 'cheolguso.bundle.js'
  };

  config.devtool = 'eval-source-map';

  config.module = {};

  config.plugins = [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({
      template: './index.html',
      inject: 'body'
    })
  ];

  return config;
}();

3. npm 커맨드 수정 및 실행

3-1. package.json 수정

{
  "name": "cheolguso-webpack2",
  "version": "1.0.0",
  "description": "webpack version2 guide",
  "main": "index.js",
  "scripts": {
    "build": "webpack --bail --progress --profile",
    "server": "webpack-dev-server --history-api-fallback --inline --progress"
  },
  "author": "CHEOLGUSO",
  "license": "WTFPL",
  "devDependencies": {
    "html-webpack-plugin": "^2.30.1",
    "webpack": "^2.6.1",
    "webpack-dev-server": "^2.11.1"
  }
}

3-2. 개발 서버 실행

$ npm run server

3-3. 빌드

$ npm run build

4. webpack 설정들과 간단한 설명

4-1. entry, output

entry는 몇가지 형태로 존재하는데, 그 이해를 위해선 output도 함께 보는 것이 좋습니다.

// 1.
config.entry = './index.js';
config.output = {
  path: __dirname + '/build',
  filename: 'cheolguso.bundle.js'
}
// 2.
config.entry = ['./index.js', './addScript.js'];
config.output = {
  path: __dirname + '/build',
  filename: 'cheolguso.bundle.js'
}
// 3.
config.entry = {
  index : './index.js', 
  addScript : './addScript.js'
};
config.output = {
  path: __dirname + '/build',
  filename: '[name].bundle.js'
}
// 여기에서 [name]은 entry객체의 키값이 됩니다. (eg. index, addScript)

4-2. devtool

config.devtool = 'eval-source-map';

압축, 난독화, es6+ 의 트랜스파일 등의 작업들로 어려워지는 디버깅을 소스맵을 통해 조금 수월하게 할 수 있는 옵션으로 이미 여러가지 옵션이 있으며 플러그인을 통해 더 확장되는 것으로 보입니다.
개인적으로는 angular1 + babel을 사용한 프로젝트에서 eval 이 포함되지 않는 옵션은 알 수 없는 오류가 발생해서 실험해보지 못하였으며, 단순히 결과적으로 배포를 위한 번들을 만듦에 있어, eval-source-map 에서 2.7mb 였던 번들의 크기가 eval에서 830kb 로 줄어드는 것을 알 수 있었습니다.

아직 옵션들 하나 하나의 정확한 차이는 알지못합니다..
이부분은 webpack v3(또는 v4) 버전의 글을 작성할때 추가하도록 하겠습니다.

4-3. module

config.module = {
  rules: [{
    test: /\.js$/,
    exclude: /node_modules/,
    use: {
      loader: 'babel-loader',
      query: {
        presets: ['es2015']
      }
    }
  }, {
    test: /\.less$/,
    use: [
      {loader: "style-loader"},
      {loader: "css-loader", options: {sourceMap: true}},
      {loader: "less-loader", options: {sourceMap: true}}
    ]
  }]
};

예를 들어 위와 같이 설정한다면, es6 -> es5로 less는 css 트랜스파일 됩니다.

babel-loader, style-loader, css-loader, less-loader 는 추가로 설치해야 합니다

4-4. plugin

config.plugins = [
  new webpack.optimize.UglifyJsPlugin()
];

이름 그대로 플러그인을 설정합니다.
UglifyJsPlugin 플러그인은 자바스크립트 코드를 압축해줍니다.

5. 참고링크

검색을 통해 더 많은 글을 참고하였지만 그중에 좋았던 글들을 추려서 남깁니다. 감사합니다!
hyunseob.github.io
dev-momo.tistory.com
github:FEDevelopers
github:FEDevelopers
blog.jeonghwan.net