Webpack 설정하기

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/