003. TIL - Today I Learned 20220918

#1 Webpack 

 

ES6 모듈은 IE를 포함한 구형 프라우저에는 동작하지 않으며, 브라우저의 ES6 모듈 기능을 사용하더라도 트랜스파일링이나 번들링이 필요하기 때문에 아직까지는 브라우저가 지원하는 ES6 모듈 기능보다는 Webpack 등의 모듈 번들러를 사용하는 것이 일반적이다. 

 

크롬, 사파리, 파이어폭스, 엣지 같은 에버그린 브라우저(evergreen browser)의 ES6 지원율은 약 98%로 거의 대부분의 ES6 사양을 지원한다. (브라우저에 따라 지원율이 제각각이다.) 

 

이러한 이유 때문에 ES6+와 ES.NEXT의 최신 ECMAScript 사양을 사용하여 프로젝트를 진행 하려면 최신 사양으로 작성된 코드를 경우에 따라 IE를 포함한 구형 브라우저에서 문제 없이 동작시키기 위한 개발 환경을 구축하는 것이 필요하다. 

 

또한, 대부분의 프로젝트가 모듈을 사용하기 때문에  모듈 로더도 필요하다. ES6 모듈(ESM)은 대부분의 모던 브라우저(Chrome 61, FF60, SF 10.1, Edge 16 이상)에서 사용할 수 있다. 하지만 다음과 같은 이유로 아직까지는 ESM보다는 별도의 모듈 로더를 사용하는 것이 일반적이다. 

 

• IE를 포함한 구형 브라우저는 ESM을 지원하지 않는다.
• ESM을 사용하더라도 트랜스파일링이나 번들링이 필요한 것은 변함이 없다. 
• ESM이 아직 지원하지 않는 기능(bare import 등이 있고 점차 해결되고 있지만 아직 몇 가지 이슈가 존재한다.

 

Webpack은 의존 관계에 있는 자바스크립트, CSS, 이미지 등의 리소스들을 하나(또는 여러개)의 파일로 번들링하는 모듈 번들러다. Webpack을 사용하면 의존 모듈이 하나의 파일로 번들링되므로 별도의 모듈로더가 필요 없다. 

 

그리고 여러개의 자바스크립트 파일을 하나로 번들링하므로 HTML 파일에서 script 태그로 여러 개의 자바스크립트 파일을 로드해야 하는 번거로움도 사라진다. 

 

Webpack 사이트

#2 webpack.config.js

 

webpack.config.js는 Webpack이 실행될 때 참조하는 설정 파일이다. 

webpack.config.js 파일을 따로 생성하고 작성 해야 한다. 

 

const path = require("path");
const TerserPlugin = require("terser-webpack-Plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

module.exports = {
  // entry file
  // https://webpack.js.org/configuration/entry-context/#entry
  entry: "./src/js/index.js",
  // 번들링된 js 파일의 이름(filename)과 저장될 경로(path)를 지정
  // https://webpack.js.org/configuration/output/#outputpath
  // https://webpack.js.org/configuration/output/#outputfilename
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./dist"),
    clean: true,
  },
  devtool: "source-map",
  // https://webpack.js.org/configuration/mode
  mode: "development",
  devServer: {
    host: "localhost",
    port: 8080,
    open: true,
    watchFiles: "index.html",
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "keyboard",
      template: "./index.html",
      inject: "body",
      favicon: "./favicon.ico",
    }),
    new MiniCssExtractPlugin({
      filename: "style.css",
    }),
  ],
  // https://webpack.js.org/configuration/module   
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
  optimization: {
    minimizer: [new TerserPlugin(), new CssMinimizerPlugin()],
  },
};

 

이상태로 파일이 실행시키려 할때 트랜스 파일링은 Babel이 수행하고 번들링은 Webpack이 수행한다. 

** package.json에서 debugger 설정을 바꾸고 webpack-dev-server 실행해 보자 

 

npm run build 실행화면

 

Webpack을 실행하면, dist/js 폴더에 bundle.js가 생성된다. (위에 사진은 이미 한거에 다시 build 한거라 새로 만들어지는 모습과는 다르게 나옴.) 이 파일은 main.js 모듈이 하나로 번들링된 결과물이다. index.html을 다음과 같이 수정하고 브라우저에서 실행해 보려 한다. 

 

 

이제 실행을 해보면 여러 js 모듈이 하나로 번들링된 bundle.js가 브라우저에서 문제 없이 실행된 것을 확인해 볼수 있다.