티스토리 뷰

21세기 프론트엔드 목차

  1. 개발 환경 세팅하기
  2. webpack 확장하기
  3. 배포하기

이전 글에서 기본적인 개발환경을 세팅했으니 이제 완성된 코드와 디렉토리를 서버에 올릴 수 있는 배포용으로 가공하는 방법을 살펴보겠다.

UglifyJS 사용하기

코드가 길어질 경우 번들링된 bundle.js 파일이 엄청나게 커질 수 있다. 그래서 코드를 압축하는 과정이 필요한데, 이때 사용하는 것이 UglifyJS다. 이와 같은 압축기(compressor)에는 YUI CompressorGoogle Closure Compiler가 있다. 이러한 압축기는 코드의 변수명도 모두 한 글자 정도로 바꿔주기 때문에 압축과 난독화의 기능을 동시에 한다. 우리는 webpack의 플러그인으로 만들어진 UglifyJS를 사용할 것이다. npm을 통해 설치한다.

npm install uglifyjs-webpack-plugin --save-dev

그리고 webpack.config.js을 수정해 이 플러그인을 적용해준다.

// webpack.config.js
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: './',
    compress: true,
    port: 9000
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env']
          }
        }
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      }
    ]
  },
  plugins: [
    new UglifyJsPlugin()
  ],
};

자, 이제 터미널에서 npm run build를 실행하면 UglifyJS를 거쳐 압축된 번들 코드가 만들어지는 것을 볼 수 있다!

CopyWebpackPlugin 사용하기

지금까지 하나의 폴더에서 모든 파일을 관리해왔는데, 실제로 프로젝트의 규모가 커지면 단일 폴더에서 파일을 관리하기는 쉽지 않다. 그래서 아래와 같이 폴더를 쪼개야 한다.

.
├── dist/
│   └── index.html
│   └── css/
│       └── index.css
│   └── js/
│       └── bundle.js
├── public/
│   └── index.html
├── src/
│   └── css/
│       └── index.css
│   └── js/
│       └── index.js
├── node_modules/
│   └── ...
├── package.json
└── webpack.config.js

이건 내가 주로 사용하는 디렉토리 구조이고, 사용하는 프레임워크나 언어, 환경에 따라 디렉토리 구조는 바뀔 수 있다. (Vue.js의 경우 이런 식의 디렉토리 구조를 제안한다.) dist는 배포파일을, public은 html과 같은 static 파일을, src는 자바스크립트 파일과 css파일을 담는 폴더로 구성하고 있다. public이나 src 폴더는 개발환경에서 사용하고, 실제 서버에 올리거나 사용자에게 배포되는 코드는 dist에 모아둔다. 물론 파일을 직접 손으로 옮기진 않고, CopyWebpackPlugin이라는 웹팩 플러그인을 사용한다.

npm install copy-webpack-plugin

플러그인을 설치한 뒤에는 역시 webpack.config.js를 수정해줍니다.

// webpack.config.js
const CopyWebpackPlugin = require('copy-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  entry: './index.js',
  output: {
    path: './dist/src/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: './dist/',
    compress: true,
    port: 9000
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env']
          }
        }
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      }
    ]
  },
  plugins: [
    new UglifyJsPlugin(),
    new CopyWebpackPlugin([{
      from: './public/',
      to: './dist/'
    }]),
  ],
};

bundle.js가 아웃풋되는path를 바꿔서 dist 폴더 아래 src 폴더에 자동으로 넣도록했고, CopyWebpackPlugin은 public 폴더의 파일들을 dist 폴더에 넣도록 설정했다. 이제 빌드를 하면 자동으로 dist 폴더에 src 폴더, css 폴더, js 폴더가 생기면서 배포용 파일들을 모아주게 된다. devServer의 contentBase 값도 ./dist/로 바꿔야 최종 빌드된 결과물을 볼 수 있다.

이렇게 21세기 프론트엔드 개발 과정이 끝났다! 이렇게까지 해야 하나 싶기도 하지만, 복잡한 환경이 만들어지는 데는 아무래도 이유가 있다. 개발 과정에 나타나는 다양한 문제를 해결하는 데 이정도 수고는 들여볼 필요가 있지 않을까?

댓글
댓글쓰기 폼