webpack.config.js 파일을 생성하여 config 객체를 이용해서 module.exports를 통해 외부로 노출시킬 수 있다. config 파일은 mode, entry, output, module, plugins를 제공한다.

모드 (mode)

devoplement면 개발용, production이면 배포용이다.

webpack.config.js

module.exports = {
    mode: 'development'        // or production
};

엔트리 (entry)

번들링하려는 자바스크립트 모듈의 진입점을 엔트리(entry 또는 entry point)라 부른다.

webpack.config.js

module.exports = {
  entry: {
      main: './src/app.js',
  }
};

아웃풋 (output)

엔트리에서 설정된 자바스크립트 파일로부터 출발하여 의존되는 모든 모듈들을 하나로 만든다.

webpack.config.js

module.exports = {
    output: {
        filename: 'bundle.js',
          path: './dist',
    }
};

로더 (loader)

웹팩의 모든 파일은 모듈로 관리되는데, 자바스크립트 파일 외에 이미지, 폰트, css도 관리한다. 로더가 이미지, css 등의 모듈들을 웹팩이 이해할 수 있도록 하는 역할을 한다.

webpack.config.js

module.exports = {
    module: {
        rules: [{
            { 
                  test: /\.css$/, 
                  use: 'css-loader' 
            },
              { 
                  test: /\.ts$/, 
                  use: 'ts-loader' 
            },
            {   use: 'sass-loader' },
            {
                 test:  /\.js$/,
                  use: {
                    loader: 'babel-loader',
                      options: {
                        presets: ['env']
                      }        
                }
            }
        }]
    }
};

플러그인 (plugins)

부가적인 기능들을 플러그인에 추가할 수 있다. 이러한 패키지들을 잘 활용하면 효과적으로 번들링할 수 있다.

webpack.config.js

module.exports = {
    plugins: {
        new webpack.ProgressPlugin(),
          new HtmlWebpackPlugin({template: './src/index.html'}),
        new webpack.optimize.UglifyJsPlugin(),
        new webpack.EnvironmentPlugin(['NODE_ENV']), 
    }
};

관련 링크
http://jeonghwan-kim.github.io/js/2017/05/15/webpack.html
https://medium.com/@shlee1353/%EC%9B%B9%ED%8C%A9-%EC%9E%85%EB%AC%B8-%EA%B0%80%EC%9D%B4%EB%93%9C%ED%8E%B8-html-css-%EC%82%AC%EC%9A%A9%EA%B8%B0-75d9fb6062e6
https://meetup.toast.com/posts/153
https://webpack.js.org/concepts/loaders/