webpack 설정과 package.json 모듈 목록

package.json

{
	"name": "babel-webpack4-exercise",
	"version": "0.0.1",
	"description": "",
	"main": "index.js",
	"scripts": {
		"dev": "webpack --config webpack.development.config.js"
	},
	"keywords": ["babel", "webpack4"],
	"license": "ISC",
	"dependencies": {
		"babel-polyfill": "^6.26.0",
		"ramda": "^0.25.0"
	},
	"devDependencies": {
		"@babel/core": "^7.0.0-beta.46",
		"@babel/plugin-proposal-pipeline-operator": "^7.0.0-beta.46",
		"@babel/preset-env": "^7.0.0-beta.46",
		"@babel/preset-stage-0": "^7.0.0-beta.46",
		"babel-loader": "^8.0.0-beta.2",
		"webpack": "^4.8.2",
		"webpack-cli": "^2.1.3",
		"webpack-dev-server": "^3.1.4"
	}
}

webpack.development.config.js

const webpack = require('webpack');
const path = require('path');

const publicPath = '/';

module.exports = {
	mode: 'development', // v4: 'production'로 설정하면 알아서 최적화를 해준다.
	entry: {
		vendor: ['babel-polyfill', 'ramda'], // 자주 사용하는 라이브러리는 따로 vendor로 빼놓는다.
		app: ['./src/app.js'],
	},
	output: {
		path: path.resolve(__dirname, 'dist'),
		filename: '[name].[hash].bundle.js', // build마다 각각의 hash값을 부여
		publicPath: publicPath,
		// globalObject: 'global', // chunks 적용시 필요.
	},
	module: {
		rules: [
			{
				test: /\.js?$/,
				exclude: ['/node_modules'],
				use: {
					loader: 'babel-loader', //  v8 버전 적용 중
					options: {
						presets: [
							[
								'@babel/preset-env', // @babel/preset-env은 babel-preset-env의 next 버전 같은 것
								{
									targets: { node: 'current' },
									modules: false, // webpack의 tree-shaking 적용을 위한 옵션
								},
							],
							[
								'@babel/preset-stage-0', // @babel/preset-stage-0은 babel-preset-stage-0의 next 버전 같은 것
								{
									decoratorsLegacy: true, // 에러 방지용
								},
							],
						],
						plugins: [require('@babel/plugin-proposal-pipeline-operator')], // pipeline-operator 지원 플러그인
					},
				},
			},
		],
	},
	plugins: [new webpack.EnvironmentPlugin(['NODE_ENV'])],
	optimization: {
		minimize: true,
		// ramda 덕에 용량이 너무 커져서(무려 600kb) 옵션으로 넣었는데 서버 사이드 렌더링 용인지 이걸 넣으면 terminal에 아무것도 안 찍힘
		// splitChunks: {
		// 	cacheGroups: {
		// 		vendor: {
		// 			chunks: 'initial',
		// 			name: 'vendor',
		// 			test: 'vendor',
		// 			enforce: true,
		// 		},
		// 	},
		// },
	},
	resolve: {
		modules: ['node_modules'],
		extensions: ['.js', '.json', '.jsx', '.css'],
	},
};