[Typescript & React & Webpack 환경설정 3편] Webpack 설정을 해보자

돌고 돌아와 드디어 Webpack 설정을 위해 도착하였습니다 !
아직 Webpack을 잘 모르겠다면 여기로 가서 학습하고 돌아오세요.

Webpack 설정하기

Webpack을 설치해봅시다
npm i -D webpack webpack-cli webpack-dev-server

• Webpack 셋팅 파일은 webpack.config.js파일을 사용하지만 develop, production 상황을 맞춰서 빌드해보겠습니다.

• 필요한 파일

  • webpack.config.common.js : dev, prod 에 공통적으로 셋팅해야 하는것
  • webpack.config.dev.js : develop환경에서 사용할 설정
  • webpack.config.prod.js : production환경에서 사용할 설정
  • pakage.json : dev, build에 따른 config를 설정한 script를 작성

webpack.config.common.js

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

module.exports = {
  entry: './src/index.tsx',
  output: {
    path: path.join(__dirname, '../dist'),
    filename: 'bundle.js',
    publicPath: '/',
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js'],
    alias: {
      '@': path.resolve(__dirname, '../src/'),
    },
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
      {
        test: /\.(png|jpe?g|gif|woff|woff2|ttf|svg|ico)$/i,
        use: [
          {
            loader: 'file-loader',
          },
        ],
      },
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  plugins: [
    new CleanWebpackPlugin({
      cleanStaleWebpackAssets: false,
    }),
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
};

• entry, output, loader, plugin, mode 에 대한 설명은 여기를 확인해주세요

...
module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
...

• babel-loader 적용
  • 앞서 설정한 babel을 ts, tsx파일을 변환하는데 적용할 수 있도록 해줍니다.

...
plugins: [
    new CleanWebpackPlugin({
      cleanStaleWebpackAssets: false,
    }),
...

• CleanWebpackPlugin : 성공적으로 재 빌드 한 후 사용하지 않는 output.path 디렉토리에 있는 모든 파일 및 webpack assets을 제거해주는 Plugin입니다.
  • cleanStaleWebpackAssets : 성공적인 재 빌드 시 webpack assets 을 제거해주는 옵션입니다. (default : true)

webpack.config.dev.js

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

module.exports = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    contentBase: '../dist',
    host: 'localhost',
    port: 8080,
    open: true,
    historyApiFallback: true,
    proxy: {
      '/api/': {
        target: 'http://localhost:3000/api',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '',
        },
      },
    },
  },
});

• merge : 앞서 만들어놓은 common Webpack 설정을 적용할 수 있도록 해줍니다.
• historyApiFallback : URL로 '/'경로 이외의 Router 설정해준 경로를 접근 할 수 있도록 해줍니다.
  • ex) 'localhost:8080/login'
• proxy : URL안에 /api 가 들어가면 서버로 proxy요청을 보내도록 하는 설정입니다.

webpack.config.prod.js

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

module.exports = merge(common, {
  mode: 'production',
});

• 별다른 설정 없이 mode 를 production으로 했을 때 적용되는 것들만 사용합니다.

package.json

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

• dev
  • webpack-dev-server를 실행시키기 위해 --config Option으로 webpack.config.dev.js를 설정해줬습니다
  • 실행 방법 npm run dev
• build
  • webpack build를 하기 위해 --config Option으로 webpack.config.prod.js를 설정해줬습니다
  • 실행 방법 npm run build