개발 및 배포환경 분리

이 챕터에서는 웹팩 머지 플러그인을 사용하여 개발환경을 분리하는 방법을 설명합니다.

• Terminal

npm install webpack-merge -D

웹팩 머지는 단어 그대로 여러 개의 웹팩 설정 파일을 하나로 병합해주는 라이브러리입니다.

일반적으로 웹 애플리케이션을 제작할 떄는 웹팩 설정을 개발용과 배포용으로 나누어 적용합니다.

실행 모드에 따라 조건 문으로 설정을 구분할 수 있으나 실제로 파일을 아예 나눠놓는것을 권장합니다.

웹팩 머지는 이러한 상황에서 더 효율적으로 사용할 수 있습니다.

• Webpack

// webpack.common.js const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); module.exports = { entry: path.resolve(__dirname, '..', './src/index'), output: { path: path.resolve(__dirname, '..', './build'), filename: 'bundle.js', }, resolve: { extensions: ['.tsx', '.ts', '.js'], }, module: { rules: [ { test: /\.(ts|js)x?$/, exclude: /node_modules/, use: [ { loader: 'babel-loader', }, ], }, { test: /\.(?:ico|gif|png|jpg|jpeg)$/i, type: 'asset/resource', }, { test: /\.(woff(2)?|eot|ttf|otf|svg|)$/, type: 'asset/inline', }, ], }, plugins: [ new HtmlWebpackPlugin({ template: path.resolve(__dirname, '..', './public/index.html'), }), new CleanWebpackPlugin(), ], stats: 'errors-only', };

// webpack.dev.js module.exports = { mode: 'development', devtool: 'cheap-module-source-map', devServer: { hot: true, open: true, }, module: { rules: [ { test: /.(s[ac]|c)ss$/, use: [ 'style-loader', 'css-loader', 'resolve-url-loader', 'sass-loader', 'postcss-loader', ], }, ], }, };

// webpack.prod.js const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { mode: 'production', devtool: 'source-map', module: { rules: [ { test: /.(s[ac]|c)ss$/, use: [ MiniCssExtractPlugin.loader, 'css-loader', 'resolve-url-loader', 'sass-loader', 'postcss-loader', ], }, ], }, plugins: [new MiniCssExtractPlugin()], };

// webpack.conifg.js const { merge } = require('webpack-merge'); const commonConfig = require('./webpack.common.js'); module.exports = ({env}) => { const envConfig = require(./webpack.${env}.js); return merge(commonConfig, envConfig); };