TIL] Bundler-Webpack

🌼 Webpack?

WebpackはJavaScriptモジュールジェネレータのタイプの1つです.js, .css, .jpgなど複数の拡張子からなる複数のファイルを組み合わせたツールです.(Bundlerのタイプには、Webpack、Broserify、Parcelなどがあります.)
Webアプリケーションが同じ変数名を使用する可能性はどのくらいですか?異なる開発者が1つのプロジェクトを行う際にこれらの変数名を考慮する必要がある場合、効率的な開発は難しい.これらの問題を解決するためには、webpackのようなバンドルパッケージが必要です.bundler는 이러한 충돌 가능성을 해결하면서 오래된 프로젝트의 코드와 최신 코드의 module 간의 호환을 도와준다.

のデフォルトでは、webpackを使用するのはnodeです.js環境ではnpmコマンドを使用できるはずです.

1. npm init // 현재 디렉토리를 node.js 프로젝트로 선언할 때 사용
2. npm install -D webpack webpack-cli // webpack을 설치할 때 사용
3. npx webpack --entry [경로1] --output [경로2] // webpack을 사용할 때 사용

 - 경로 1: ./src/index.js와 같이 모든 모듈이 모여있는 entry 파일 위치
 - 경로 2: ./public/index_bunlder.js와 같이 bundling된 파일이 저장될 경로와 이름

🌻 import/export?

ES 2015に導入された構文は、ライブラリなどのモジュールを簡単にエクスポートおよびロードすることができる.

// 1. default export
// test.js 파일의 test를 내보내기
// 단, var, let, const는 바로 export default 할 수 없다.
export default function test() {
  const num = 1;
  const str = "apple";
};  

// test.js의 test라는 변수를 가져오기
// 이름을 바꿔도 문제없다.
import _test from "./src/test.js";


// 2. named export / import 
export const num = 1;
export const str = "apple";

// multiTest.js라는 파일에서 num과 str 변수를 모두 가져오기
import {num, str} from "./src/multiTest.js";  

出典:YOUTUBE-生活コード