Development mode & Production mode

Webpack으로 설정한 소스코드 최적화에 관련된 설정을 Production mode(배포)에서만 진행될 수 있도록 분리

코드 최적화 설정 정보

https://kmj24.tistory.com/175

webpack 소스 코드 최적화

분리를 통해 최적화 관련 설정은 배포할 때만 진행 되며 개발 과정에서는 수정 반영 시간이 단축되어 쾌적한 환경으로 개발이 가능해진다.

 

환경 별 설정 파일 분리

각 환경 별 (Dev, Prod) 설정을 구분하기 위해 webpack-merge를 통해 각 환경별 파일을 만든다.

common 설정, dev모드 설정, prod모드 설정 파일 각각 만든다.

//npm
npm i webpack-merge --save-dev

//yarn
yarn add webpack-merge -D

그리고 이전까지 설정했던 최적화 관련 설정 및 플러그인을 제거한다.

webpack.common.js 설정

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    entry: './index.js',
    output: {
        filename: '[name].[chunkhash].js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    {
                        loader: 'css-loader',
                        options:{
                            modules: true
                        }
                    }
                ]
            },
            {
                test: /\.hbs$/,
                use: ['handlebars-loader']
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Webpack',
            template: './template.hbs',
            meta:{
                viewport: "width=device-width, initial-scale=1.0"
            },
            minify:{
                collapseWhitespace: true,
                removeScriptTypeAttributes: true,
                useShortDoctype: true
            }
        }),
        new MiniCssExtractPlugin({
            filename: '[contenthash].css'
        }),
        new CleanWebpackPlugin(),
    ]
}

webpack.prod.js 설정

webpack.common.js에서 지운 내용을 다시 작성한다.

const { merge } = require('webpack-merge');
const common = require('./webpack.common');

const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin');
const TerserWebpackPlugin = require('terser-webpack-plugin');

const config = {
    plugins: [
        new CssMinimizerWebpackPlugin()
    ],
    optimization:{
        runtimeChunk:{
            name: 'runtime'
        },
        splitChunks: {
            cacheGroups:{
                commons:{
                    test: /[\\/]node_modules[\\/]/,
                    name: 'venders',
                    chunks: 'all'
                }
            }
        },
        minimize: true,
        minimizer: [
            new TerserWebpackPlugin()
        ]
    },
    mode: 'production'
};

module.exports = merge(common, config);

기존에 작업한 webpack.config.js파일을 webpack.common.js, webpack.prod.js파일로 각각 나누어 webpack-merge를 이용하여 병합 했다.

webpack.dev.js를 만든다.

const { merge } = require('webpack-merge');
const common = require('./webpack.common');

const config = {
    mode: 'development'
};

module.exports = merge(common, config)

package.json에서 바뀐 webpack을 이용한 build를 진행하도록 설정한다.

{
  ...,
  "scripts": {
    "dev": "webpack --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js"
  },
  ...
}

webpack명령어를 실행할 때 "--config" flag로 설정파일을 지정할 수 있다.

//development 모드로 실행
yarn run dev

//production 모드로 실행
yarn run prod

 

Define plugin

webpack이 build를 진행할 때 특정한 상속값을 만들어 module들이 상속값을 어디서든 사용할 수 있도록 만들어 준다.

webpack module 내부 플러그인이므로 그대로 쓰면 된다.

//webpack.common.js
const webpack = require('webpack');

module.exports = {
    ...,
    plugins: [
        ...,
        new webpack.DefinePlugin({
            IS_PRODUCTION: true
        }),
    ]
}

webpack을 불러와 DefinePlugin을 설정해 주며, IS_PRODUCTION이라고 이름을 지어주고 production 모드이면 true,  development 모드이면 그게 아닌 형태로 진행하도록 한다.

package.json에서 script를 수정하여 prod 모드 또는 dev모드를 나눌 수 있다.

package.json을 수정한다.

{
  ...,
  "scripts": {
    "dev": "NODE_ENV=DEVELOPMENT webpack --config webpack.dev.js",
    "build": "NODE_ENV=PRODUCTION webpack --config webpack.prod.js"
  },
  ...
}

window환경에서는 package.json에서 위와같이 설정하면 작동되지 않는다.

cross-env plugin을 사용하여 어떤 os에서도 동일하게 동작하게 할 수 있다.

yarn add cross-env -D

설치가 되면 다시 package.json을 수정한다.

{
  ...,
  "scripts": {
    "dev": "cross-env NODE_ENV=DEVELOPMENT webpack --config webpack.dev.js",
    "build": "cross-env NODE_ENV=PRODUCTION webpack --config webpack.prod.js"
  },
  ...
}

package.json에서 `NODE_ENV=${설정값}`을 설정해 주면 process.env.NODE_ENV에서 설정값에 접근할 수 있다.

webpack.common.js에 해당 내용을 추가하고 HtmlWebpackPlugin의 minify가 prod 모드, dev 모드에 따라 달라지도록 설정 한다.

그리고 아까 설정한 webpack.DefinePlugin의 상수 boolean값을 변수할당으로 설정한다.

const isProduction = process.env.NODE_ENV === 'PRODUCTION';

module.exports = {
    ...,
    plugins: [
        new HtmlWebpackPlugin({
            ...,
            minify: isProduction ? {
                collapseWhitespace: true,
                removeScriptTypeAttributes: true,
                useShortDoctype: true
            } : false
        }),
        new webpack.DefinePlugin({
            IS_PRODUCTION: isProduction
        })
        ...
    ]
}

build해보면 dev모드로 build할때와 prod모드로 build할 때 각각 다르게 설정된 것에 대한 build가 진행된 것을 확인 할 수 있다. 

 

Development Mode 설정

dev 모드에서는 요구사항 분석 및 필요 기능 구현 과정이 반복된다.

이러한 환경에 맞추어 개발 생산성을 향상시키도록 옵션을 구성할 필요가 있다.

이를 위해 webpack에서는 local 서버를 지원해 주며 CRA에서는 localhost:3000 를 할당하여 사용하도록 한다.

이러한 환경을 위해 webpack-dev-server를 설치해야 한다.

yarn add webpack-dev-server -D

여기서 webpack의 version과 webpack-dev-server의 버전에 따라 package.json에서 script 작성을 달리 해주어야 한다.

webpack의 version이 5일때와 4일때가 다르다.

//webpack version 5
{
  ...,
  "scripts": {
    "start": "cross-env NODE_ENV=DEVELOPMENT webpack serve --config webpack.dev.js",
    ...,
  },
  ...
}

//webpack version 4
{
  ...,
  "scripts": {
    "start": "cross-env NODE_ENV=DEVELOPMENT webpack-dev-server --config webpack.dev.js",
    ...,
  },
  ...
}

만약 webpack version 5일때 4버전과 동일한 script로 작성하면 "Error: Cannot find module 'webpack-cli/bin/config-yargs'"오류를 만나므로 버전에 맞추어 작성해야 된다.

webpack과 webpack-dev-server의 version sync오류

기본 포트는 8080포트로 local서버에 적용되며 라이브 Reloading환경을 제공한다.

이는 webpack-dev-server의 파일의 변화를 감지하여 다시 build를 수행하는 watch 기능으로 작동된다.

이러한 local 개발환경에 대한 설정 변경이 webpack.dev.js에서 가능하다.

devServer

devServer에서 historyApiFallback옵션은 boolean값 또는 object형식으로 할당이 가능하며 Routing을 설정할 수 있다.

true로 설정 한다면 404오류를 만날 경우 root dir로 되돌아간다.

또한 boolean값이 아닌 object형식, 정규표현식으로 할당하여 경로를 지정할 수 있다. 정규 표현식에 따라 특정 경로에 도달 했을때 다른 경로로 이동할 수 있도록 하는 등 설정이 가능하다. 

//'hello'경로로 이동 될 경우 '/'경로로 routing되도록 설정
devServer:{
   historyApiFallback: {
      rewrites: [
         {from: /^\hello\/$/, to: '/'},
      ]
   }
}

historyApiFallback 설정 전

 

historyApiFallback설정 후

hello로 접근해도 /화면이 나오도록 설정이 된 상태다.

 

그 외 여러가지 설정 옵션이 있고 공식문서에서 확인할 수 있다.

https://webpack.js.org/configuration/dev-server/

DevServer | webpack