webpack아 이렇게 이렇게 동작해줘 이런 명령어들을 package.json안에 scripts 명령어에 나열하는 방식으로 관리하면 package.json파일도 지저분해지고, 관리가 어려워 질게 분명하기 때문에

이렇게……

webpack.config.js파일을 사용한다.

아이콘도 간지난다…….

저렇게 scripts 명령어에 직접 적어줬던것을 webpack.config.js에 적어 줄수가 있다.

하지만 이렇게 적어주니깐 된다.

kks.js를 받아서 public폴더 밑에 main.js로 합쳐준다.

// webpack.config.js
// `webpack` command will pick up this config setup by default

// node.js path라는 문법을 들고와서 path라는 변수에 넣어 주었다.
var path = require('path');

module.exports = {
  mode: 'none',
  // entry 파일을 돌려서.......
  entry: './src/kks.js',
  // 객체 형태로 전달한다.
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'public')
  }
};

path 라이브러리 :

Path | Node.js v18.7.0 Documentation

// ES6 문법
import _ from 'lodash';

// ES5 문법
// var path = require('lodash');

function component() {
  var element = document.createElement('div');

  /* lodash is required for the next line to work */
  element.innerHTML = _.join(['Hello','webpack'], ' ');
  // element.innerHTML = "Hello webpack";

  return element;
}

document.body.appendChild(component());

<aside> 💡 import _ for ‘loadsh’를 선언하므로써 index.html의 CDN으로 불러온 lodash를 삭제해도 된다.

</aside>