[기록용] Webpack Babel 을 활용한 ie 11 사용 구성 ( 1 )

webpack 과 babel 을 활용하여 ie 11 에서 사용 할 수 있는 script 를 간단히 구성해 보겠습니다.  ( windows 기준 )

가장 먼저 window command 창을 뛰웁니다. 

mkdir 로 자신이 구성할 directory  를 구성합니다. 

이후 아래와 같은 내용을 순서대로 구성합니다. 

npm init -y

- 특정 directroy 에 node를 활용하여 프로젝트를 수행 할 수 있는 구조를 만듭니다.

https://webpack.js.org/guides/getting-started  사이트의 초 간단 예제를 약간 변형합니다.

webpack 관련 모듈을 개발용으로 설치합니다. 

npm i -D webpack webpack-cli 혹은 npm install webpack webpack-cli --save-dev 라고 

입력합니다. ( 둘은 같은 역활을 수행합니다. )

source directory 를 구성한 후 ( mkdir src ) 

해당 directory 에 다음과 같은 2개의 파일을 생성합니다. 

- /src/fnInit.js

import fn from "./fnClick.js";

const initPageButton = () => {

    var domObj = document.createElement("button");

    domObj.innerHTML = "Click Me";

    domObj.onclick = fn;

    return domObj;

};

document.body.appendChild(initPageButton());

- /src/fnClick.js

export default function fnClick() { alert( "TEST CLICKED") ; }

root directory 에 webpack.config.js 파일을  다음과 같이 생성합니다.

-/webpack.config.js

const path = require('path');

module.exports = {

    mode : 'development',

    entry : ['./src/fnInit.js'],

    output : {

        filename:'main.js',

        path:path.resolve(__dirname,'dist'),

    },

}

/package.json 

{

  "name": "webpack_babel",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1",

    "build": "webpack"

  },

  "keywords": [],

  "author": "",

  "license": "ISC",

  "devDependencies": {

    "webpack": "^5.71.0",

    "webpack-cli": "^4.9.2"

  }

}

build : webpack 을 기록하여 npm run build 를 수행합니다. 

결과를 확인하면 chrome 에서는 정상적으로 index.html 이 로딩되지만, ie 에서는 

페이지가 나타나지 않습니다.  이것을 해결하기 위해서 babel 을 설정 합니다. 

babel site 는 https://babeljs.io/docs/en/usage 에서 사용법을 확인 할 수 있습니다. 

npm install --save-dev @babel/core @babel/cli @babel/preset-env

npm i @babel/runtime @babel/plugin-transform-runtime -D

npm install --save-dev @babel/runtime-corejs3

npm i -D babel-loader

npm i -D core-js@3

위 내용으로 babel 관련한 모듈을 설치합니다.  다음은 babel.config.json 입니다.

/babel.config.json 

{

  "presets": [

    [

      "@babel/preset-env",

      {

        "targets": {

          "edge": "17",

          "firefox": "60",

          "chrome": "67",

          "safari": "11.1",

          "ie":"11"

        },

        "useBuiltIns": "entry",

        "corejs": 3,

        "debug":true

      }

    ]

  ],

  "plugins": [["@babel/plugin-transform-runtime",{"corejs":3}]]

}

다시 webpack.config.js 파일을 아래와 같이 수정합니다. 

/webpack.config.js 

const path = require('path');

module.exports = {

    mode : 'development',

    entry : ['./src/fnInit.js'],

    output : {

        filename:'main.js',

        path:path.resolve(__dirname,'dist'),

    },

    target:['web','es5'],

    module: {

        rules : [

            {

                test : /\.jsx?$/,

                exclude : /node_module/,

                use: {

                    loader: 'babel-loader',

                    options : {

                        rootMode: "upward",

                    }

                }

            }

        ]

    },

}

target 으로 es5 형식으로 변환하고, babel의 변환은 babel.config.json 을 따르도록 

구성합니다.  Babel 에서 제공하는 문서에는 rootMode upward 의 경우 각 package 

단위로 하위의 디렉토리를 따라가면서 각기 다른 설정이 가능하다고 기재되어 있습니다. 

(  https://babeljs.io/docs/en/config-files 문서 참조 ) 

babel.config.json 파일은 babel 이 설정을 찾는 기본 파일 이름 입니다. 

babel 에서 제공하는 문서에는 다음과 같이 기재되어 있습니다.

rootMode

Type: "root" | "upward" | "upward-optional"
Default: "root"

Note: babel.config.json is supported from Babel 7.8.0. In older Babel 7 versions, only babel.config.js is supported.

rootMode 에 따라 약간의 차이가 있는데 root 의 경우 configFile 을 지정할 수 있지만,

upward 의 경우 package.json 이 있는 위치에 babel 의 기본 config file 이 있어야 합니다.

/src/fnClick.js

const fnClick = () => { alert( "TEST CLICKED") ; };

export default fnClick;

화살표 함수로 변경 후 npm run build 로 구성하여도 ie 11 에서 동작합니다.