Es6+용 Webpack 및 Babel 설정 방법

Webpack과 babel은 최신 JavaScript 개발자에게 가장 필수적인 두 가지 도구입니다. 함께 사용할 때 그들은 우리 무기고에서 매우 강력한 무기를 구성합니다. 이 게시물에서는 webpack4 및 babel7 구성을 살펴보겠습니다.

시작하기 전에 프로젝트용 폴더를 만들고 다음을 실행하십시오.

npm init 

package.json 파일을 구성하려면

Webpack은 최신 JavaScript 애플리케이션을 위한 정적 모듈 번들러입니다. 기본적으로 모든 JavaScript 파일을 하나의 파일로 묶어서 서로에 대해 알 수 있도록 합니다. webpack을 설치하려면 다음을 실행하십시오.

npm install webpack --save-dev

이것은 npm에게 webpack의 최신 버전을 개발 종속성으로 설치하도록 지시합니다. webpack이 설치된 상태에서 webpack.config.js 파일을 만들고 다음 내용으로 채웁니다.

const path = require('path');

module.exports = {
    entry: './src/js/index.js', //location of your main js file
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/bundle.js'  // where js files would be bundled to
   }
 } 

그런 다음 명령줄을 통해 webpack과 통신할 수 있는 방법이 필요하고 이를 위해 webpack 명령줄을 사용하며 npm으로 설치해야 한다고 추측했습니다. 이제 실행합니다.

npm install webpack-cli --save-dev

또한 포트에서 웹 앱을 제공하기 위해 webpack-dev-Server를 설치해야 합니다. 마지막으로 html-webpack-plugin을 설치할 수 있습니다.

npm install webpack-dev-server html-webpack-plugin  --save-dev

이제 webpack.config.js 파일을 다음과 같이 업데이트합니다.

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

module.exports = {
  entry: './src/js/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/bundle.js'
  },
  devServer: {
    contentBase: './dist' //where contents are served from
  },
  plugins: [
    new HtmlWebpackPlugin({
       filename: 'index.html', // name of html file to be created
       template: './src/index.html' // source from which html file would be created
    })
]
}

마지막으로 package.json의 스크립트를 다음으로 변경하십시오.

"scripts": {
 "dev": "webpack --mode development",
 "build": "webpack --mode production",
 "start": "webpack-dev-server --mode development --open"
} 

위의 dev 스크립트를 실행하면 js 파일이 번들되고 빌드 스크립트가 실행되면 js 파일이 번들로 축소되며 시작 스크립트를 실행하면 포트에서 앱이 제공됩니다.

npm run dev       //running dev script
npm run build    //running build script
npm run start     //running Start script

Babel은 현재 및 이전 브라우저 또는 환경에서 ECMAScript 2015+ 코드를 이전 버전과 호환되는 JavaScript 버전으로 변환하는 데 주로 사용되는 도구 체인입니다.
babel 실행에 필요한 모든 요구 사항을 얻으려면 다음을 수행하십시오.

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

또한 실행

npm install @babel/runtime core-js@3 --save

이제 babel을 실행하기 위한 모든 요구 사항이 있습니다. .babelrc 파일을 만들고 다음과 같이 내용을 업데이트합니다.

{
"presets": [
    ["@babel/preset-env", {
        "useBuiltIns": "usage",
        "corejs": "3",
        "targets": {
            "browsers": [
                "last 5 versions",
                "ie >= 8"
            ]
        }
    }]
]
}

그런 다음 webpack.config.js 파일을 다음과 같이 업데이트합니다.

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

module.exports = {
entry: './src/js/index.js',
output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/bundle.js'
},
devServer: {
    contentBase: './dist'
},
plugins: [
    new HtmlWebpackPlugin({
       filename: 'index.html',
       template: './src/index.html' 
    })
],
module: {
    rules: [
        {
            test: /\.js$/, //using regex to tell babel exactly what files to transcompile
            exclude: /node_modules/, // files to be ignored
            use: {
                loader: 'babel-loader' // specify the loader
            } 
        }
    ]
}
}

모든 작업이 완료되면 dev 또는 build 스크립트를 실행한 다음 시작 스크립트를 실행합니다. 이제 webpack과 babel이 성공적으로 설정되었습니다. 모듈식 프로그래밍을 사용하고 앱에서 Es6+ 구문을 사용하는 것도 재미있습니다.