Module 및 Webpack 설정방법

모듈

디렉터리구조

- index.html 

- index.js (번들되기전 최종취합본)

- a.js (모듈A)

- b.js (모듈B)

- webpack.config.js (웹팩설정파일)

- node_modules / 생략 

- dist / bundle.js (최종적으로 html에 연결 할 번들js파일)

 

모듈구조

//index.js
import {aBox, aColor, aName } from './a.js'
import * as B from './b.js'


console.log(aBox, aColor, aName);
console.log(B.bBox, B.bColor, B.bName);

//a.js
let aBox = 'aBOX',
    aColor = '#0000ff',
    aName = 'aaa'
;
export {aBox, aColor, aName}

//b.js
let bBox = 'bBOX',
    bColor = '#ff0000',
    bName = 'bbb'
;
export {bBox, bColor, bName}

a.js와 b.js에 각각 리턴값을 export하고 index.js에서 이를 import하여 사용.

* 단 번들링없이 index.js를 사용하려면 <script>태그에 속성값 type을 module로 설정해줘야한다.

 

 

웹팩 (Webpack)

 

1. npm init -y : 해당 폴더에 packges.json을 생성

2. npm install webpack webpack-cli --save-dev : webpack설치

3. webpack.config.js파일 생성 후 아래 양식 작성

// webpack.config.js
const path = require('path');

const MAIN_FILE = path.resolve(__dirname, 'src', 'assets', 'js', 'main.js');

module.exports = {
  mode: 'development',
  entry: ['./index.js'],
  output: {
    path: path.resolve('./dist'),
    filename: 'bundle.js',
  },
};

4. package.json 파일에 scripts부분에 아래 양식 추가 ("build" 부분은 변경가능)

// package.json
{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "css-loader": "^4.2.0",
    "swiper": "^6.1.1",
    "webpack-cli": "^3.3.12",
    "webpack": "^4.44.1"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build" : "webpack"  //이부분 추가!!
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

5. npm run build : 웹팩실행 -> dist폴더내에 bundle파일이 생김.