Webpack 시작하기

설치하기

npm install webpack webpack-cli --save

webpack 이란 무엇이며 왜 사용하는가

웹개발을 하면서 수많은 파일에 수많은 코드를 작성하게 된다. 하지만, 코드를 배포하기 위해서는 최대한 작은 용량으로 파일을 배포해야 하며 이를 위해 우리는 minify 혹은 uglify 등을 통해 파일을 작은 용량으로 압축해서 배포한다.
이 과정은 상당히 번거로우며 수많은 파일들을 하나의 파일로 만들 수 없을 뿐 아니라 모든 파일마다 압축을 수행해야 하는 단점이 존재한다. 또한 단순 js 파일 뿐 아니라 css, scss, png, jpg 등 다양한 스타일링 및 static asset들을 포함하면 그 양은 매우 막대한 양이 아닐 수 없으며, compile 이 필요한 다양한 framework 이 만들어 내는 수많은 자동생성 파일들을 올바르게 배포하는 것은 여간 어려운 일이 아니다.

webpack은 점차 복잡해져가는 개발 환경에서 발생하는 복잡한 상관관계를 모두 합쳐 단 하나의 파일로 bundle시켜주는 module bundler 이며 많은 framework들이 이를 차용하고 있다.

다음은 webpack 공식 홈페이지에서 제공하는 예제코드이며 몇줄의 코드를 통해 webpack이 어떤 역할을 하는지 단번에 이해할 수 있다.

src/index.js

import bar from './bar'

bar();

src/bar.js

export default function bar(){
  //
}

webpack 설정 파일 webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};

page.html

<!doctype html>
<html>
  <head>
    ...
  </head>
  <body>
    ...
    <script src="dist/bundle.js"></script>
  </body>
</html>

위처럼 여러개의 js 파일을 하나로 bundle 하여 단 하나의 js 파일만을 import 할 수 있게 된다.

기본 개념

webpack은 내부적으로 프로젝트 내의 상관 관계를 graph 로 작성하여 번들링을 진행한다.

entry

webpack 이 번들링을 시작할 파일이며, 모든 상관관계가 이 파일로 부터 시작된다. 흔히 project의 index.js 파일에 비유될 수 있다.

example

module.exports = {
  entry: './path/to/my/entry/file.js'
};

output

output 은 webpack에게 생성된 bundle 을 어디에 위치시킬 지 가르쳐 준다.
초기 설정은 ./dist 로 되어 있으며 main.js 파일을 생성시킨다.

loaders => modules

webpack은 오직 js 파일만을 식별이 가능하지만, bundling을 진행하기 위해서는 다양한 파일 형식을 load 할 수 있어야 하는데 이것은 loader의 도움을 받아 처리될 수 있다.
가령 babel-loader 와 같이 typescript 를 transpiling 을 담당하는 것들이 있다.


module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

여기서 test는 어떤 파일을 읽어들일지를 말해주며, use 는 어떤 loader를 사용하여 읽어들일 지를 결정한다.

plugins

module이 특정 형식의 모듈을 변형시키는 데에 사용되는 반면, plugin은 bundling optimization 등 보다 넓은 범위의 태스크를 처리한다.

const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins

module.exports = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

여러개의 플러그인을 array 형태로 추가할 수 있으며, 반드시 new keyword 를 통해 인스턴스를 생성해서 넣어주어야 한다.

mode

mode parameter 는 어떤 모드로 bundling 을 진행할지를 알려준다.
develop, production 등의 모드가 있으며 기본 값은 production 이다.

babel-loader 사용하기

babel loader 설치하기

npm install --save-dev babel-loader babel-core

webpack 설정하기

webpack.config.js

    module: {
        rules: [
            // babel loader
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['babel-preset-env']
                    }
                }
            }
        ]
    },

babelrc 설정하기

sudo npm install babel-preset-env --save

babelrc.js

{
  "presets": ["env"]
}

vue-loader 설정하기

sudo npm i css-loader --save

webpack.config.js

  module: {
    rules: [
      {
        test: /\.vue$/,
        use: 'vue-loader'
      },
      // this will apply to both plain `.css` files
      // AND `` blocks in `.vue` files
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      }
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['babel-preset-env']
          }
        }
      },
    ],
  },

실행하기

webpack-cli --config webpack.config.js