[javascript] Webpack을 이용한 멀티 환경 구성
웹 개발을 하다보면 다양한 환경에서 애플리케이션을 테스트하고 배포해야 할 때가 있습니다. 이런 경우에 Webpack을 사용하여 멀티 환경을 구성할 수 있습니다. Webpack은 모듈 번들러로써, 여러 개의 모듈을 하나의 번들 파일로 묶어주는 역할을 합니다. 이를 활용하여 개발, 테스트, 배포 등 다양한 환경에서 애플리케이션을 구성할 수 있습니다.
개발 환경 구성
개발 환경에서는 주로 개발을 위한 기능들을 사용하기 위해 적절한 설정을 추가합니다. 예를 들어, 개발 서버를 실행하고 변경된 코드를 실시간으로 반영해주는 기능인 HMR(Hot Module Replacement) 등을 사용할 수 있습니다.
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
devtool: 'inline-source-map',
devServer: {
contentBase: './dist',
hot: true
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
title: 'Development'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
clean: true
}
};
테스트 환경 구성
테스트 환경에서는 개발환경과는 달리 테스트를 위한 설정을 추가합니다. 예를 들어, 코드 커버리지를 확인하기 위한 설정이나 테스트를 자동으로 실행해주는 기능인 watch 등을 사용할 수 있습니다.
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
mode: 'none',
devtool: 'eval',
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: 'Test'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
clean: true
}
};
배포 환경 구성
배포 환경에서는 프로덕션을 위한 설정을 추가합니다. 코드의 최적화나 버전 관리 등을 위한 설정을 추가할 수 있습니다.
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
mode: 'production',
devtool: 'source-map',
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: 'Production'
}),
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css'
})
],
output: {
filename: '[name].[contenthash].js',
path: path.resolve(__dirname, 'dist'),
clean: true
}
};
마무리
위의 예시 코드를 통해 Webpack을 이용하여 멀티 환경을 구성하는 방법을 살펴보았습니다. 개발, 테스트, 배포 환경에 맞게 필요한 설정을 추가하여 애플리케이션을 효과적으로 관리할 수 있습니다. Webpack의 강력한 기능을 활용하여 웹 개발 작업의 생산성을 높여보세요!