230704 프론트엔드 개발 환경 회의 (19:20 ~ 20:50)

[cruelladevil]

Webpack

• common, dev, prod로 나눈다.
• 로더는 babel-loader, ts-loader를 사용한다.
• 플러그인은 HtmlWebpackPlugin을 사용한다.
• webpack-dev-server를 활용해 개발서버를 구동한다.

dependency

{
  "devDependencies": {
    "webpack": "^5.88.1",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1",
    "babel-loader": "^9.1.2",
    "ts-loader": "^9.4.4",
    "html-webpack-plugin": "^5.5.3"
  }
}

webpack.common.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: {
    main: './src/index.tsx',
  },
  output: {
    // TODO: filename
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,
  },
  module: {
    rules: [
      {
        // TODO: test, exclude
        test: /\.[jt]sx?$/,
        use: ['babel-loader', 'ts-loader'],
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'public/index.html'),
    }),
  ],
};

webpack.dev.js

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

module.exports = merge(common, {
  mode: 'development',
  devServer: {
    historyApiFallback: true,
    port: 3000,
  },
});

webpack.prod.js

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

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

babel

• @babel/preset-env를 활용하여 브라우저 지원 범위와 폴리필을 구현해줄 corejs를 설정한다.

dependency

{
  "devDependencies": {
    "@babel/cli": "^7.22.5",
    "@babel/core": "^7.22.6",
    "@babel/preset-env": "^7.22.5",
    "@babel/preset-react": "^7.22.5",
    "babel-loader": "^9.1.2",
    "core-js": "^3.31.0",
  }

babel.config.js

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          // TODO: 브라우저 지원 범위
          chrome: '67',
          safari: '11.1',
          edge: '17',
          firefox: '60',
        },
        useBuiltIns: 'entry',
        corejs: '3.31.0',
      },
    ],
    ['@babel/preset-react'],
  ],
};

보일러 플레이트 링크

https://github.com/cruelladevil/boilerplate