[Typescript & React & Webpack 환경설정 3편] 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 환경에서 사용할 설정
• package.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이다.

• cleanStateWebpackAssets: 성공적인 재 빌드 시 weback 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