웹팩 입문: 3. webpack4, babel7 설정 및 웹성능 최적화
웹팩 입문 시리즈 세번째편, webpack 4와 babel7 설치에 대해 알아보도록 하겠습니다. 이전 1편, 2편에서는 webpack 3.x.x를 사용하였습니다. 이번은 4.30.0버전을 기반으로 웹팩 설정을 진행하도록 하겠습니다.
$ npm install --save-dev webpack webpack-cli처음 설치는 동일하며 다른점이 있다면 entrypoint와 output을 설정하지 않아도 자동으로 ./src/index.js 파일로, ./dist/main.js로 인지하고 번들링합니다.
다음으로 babel7을 설치하도록 하겠습니다.
npm install --save-dev @babel/core babel-loader @babel/preset-env설치 후 .babelrc를 생성 후 기본설정을 추가해 주셔야합니다.
{
"presets": [
"@babel/preset-env"
]
}마지막으로 webpack.config.js를 설정합니다. package.json을 포함한 전체 코드를 살펴보도록 하겠습니다. 1편, 2편에 강좌에 사용했던 설정 몇가지들을 함께 추가해봤습니다.
{
"name": "webpack_example",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server --hot --inline",
"build": "webpack --mode production"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.4.4",
"@babel/preset-env": "^7.4.4",
"babel-loader": "^8.0.5",
"css-loader": "^2.1.1",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^0.23.1",
"webpack": "^4.30.0",
"webpack-cli": "^3.3.2",
"webpack-dev-server": "^3.3.1"
}
}const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');module.exports = {
module:{
rules:[
{
test: /\.css$/,
use: ['style-loader','css-loader']
}, {
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
},
devServer: {
contentBase: path.join(__dirname, "./dist/"),
port: 9000
},
plugins: [
new HtmlWebpackPlugin({
title: 'Project Demo',
minify: {
collapseWhitespace: true
},
hash: true,
template: './src/index.html'
})
]
}
웹팩을 사용하는 이유는 번들을 통한 성능 최적화라는 목적을 가지고 있습니다. 즉, 적정 사이즈의 번들을 생성하고 관리를해야합니다. 이럴 때 사용할 수 있는 것이 바로 webpack-bundle-analyzer 입니다. 설치와 사용방법은 매우 간단하지만 아주 강력한 기능을 제공하고 있습니다.
npm install --save-dev webpack-bundle-analyzer// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;plugins: [
new HtmlWebpackPlugin({
title: 'Project Demo',
minify: {
collapseWhitespace: true
},
hash: true,
template: './src/index.html'
}),
new BundleAnalyzerPlugin()
]
설치 및 설정이 끝나면 npm run dev 명령어를 실행을 합니다. 그러면 브라우저에서 아래와같은 화면을 확인하실 수 있습니다.
번들의 크기를 시각적으로 쉽게 알 수 있어서 매우 편리합니다. 예를들어, 가장 많은 용량을 차지하는 것이 sockjs.js인데요, 사전에 설치한 webpack-dev-server 모듈 때문입니다. 성능 최적화를 위해, webpack-dev-server를 제거하거나 다른 모듈로 대치할 수 있습니다. 그러면 sockjs.js를 비롯하여 관련 모듈이 제거 되면서 아래와 같은 화면이 나옵니다. 용량도 크게 줄었습니다.
극히 단순한 예시지만, webpack-bundle-analyzer의 용도를 이해하기에 충분합니다. 만약 서비스가 리액트로 개발되어 있다면, React.lazy를 사용하여 Code splitting을 통한 리소스 로딩 최적화도 가능합니다.
