[Webpack] babel 지원 브라우저 설정하기

webpack.config.js의 babel options에서 브라우저 지원 여부를 디테일하게 설정할 수 있다.

const path = require('path');
const webpack = require('webpack');

module.exports = {
  mode: 'development',
  devtool: 'inline-source-map', // hidden-source-map
  resolve: {
    extensions: ['.jsx', '.js'],
  },

  entry: {
    app: './client',
  },
  module: {
    rules: [{
      test: /\.jsx?$/,
      loader: 'babel-loader',
      options: {
        presets: [
          ['@babel/preset-env', {
            targets: {
              browsers: ['> 1% in KR'], // browserslist
            },
            debug: true,
          }],
          '@babel/preset-react',
        ],
        plugins: [],
      },
    }],
  },
  output: {
    filename: 'app.js',
    path: path.join(__dirname, 'dist'),
  },
};

 

targets: { browsers: ['지원 내용'] }

위의 지원 내용에서 지원하고자 하는 브라우저를 설정하면 된다.

너무 많은 브라우저를 지원하게 되면 babel이 너무 많은 작업을 해야하기 때문에 효율적으로 설정하는것이 좋다고 한다.

위 코드의 경우

'> 1% in KR'

이라고 적혀있는데 이것은 한국에서 1% 이상의 점유율을 가진 브라우저를 지원한다는 얘기이다.

 

설정 방법은 아래의 깃허브에서 확인.

https://github.com/browserslist/browserslist

GitHub - browserslist/browserslist: 🦔 Share target browsers between different front-end tools, like Autoprefixer, Stylelint a