WebPack 사용법

* 최신버전 nodejs 설치
https://nodejs.org/
- npm은 덤
- 버전 확인
node -v
npm -v


* npm 초기화
package.json 파일 생성
https://kdydesign.github.io/2017/07/15/nodejs-npm-tutorial/

npm init -y


* npm 패키지 설치
- package.json에 있는 의존성 패키지 모두 설치
npm install


* webpack 설치
https://webpack.js.org/guides/installation/

- 로컬로 설치
npm install --save-dev webpack
npm install --save-dev webpack-cli

- 전역으로 설치( 비추)
npm install --global webpack

- --save 와 --save-dev 옵션의 차이
둘다 .node_moduels 폴더에 패키지를 설치하고지만 
--save-dev는 package.json 파일의 devDependencies{}섹션에 기록되고  --production 빌드시 포함되지 않음


- webpack version
npm list webpack
npm view webpack version
.\node_modules\.bin\webpack -v


//====================
* webpack 스크립트 추가
- 명령 간소화
- package.json 파일 편집

"scripts": {
    "webpack": "webpack --mode development"
  }

- 명령실행
npm run webpack
./node_modules/.bin/webpack 와 동일


//=============================
* webpack.config.js 파일 작성
https://webpack.js.org/configuration/
 - webpack 기본 설정 파일

-  webpack.config.js 생성 명령
npx webpack-cli init


//================
- 수동 작성 예시
const webpack = require('webpack');
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist2'),
filename: 'app.bundle.js'
}
}


//=======================
< 명령, 옵션 >
https://webpack.js.org/api/cli/


--config webpack2.config.js
- 설정파일 설정 : 기본 = webpack.config.js


--mode
"development" or "production"



//====================



//=========================
//참고
https://imskojs.github.io/intro-to-webpack/
https://medium.com/@shlee1353/%EC%9B%B9%ED%8C%A9-%EC%9E%85%EB%AC%B8-%EA%B0%80%EC%9D%B4%EB%93%9C%ED%8E%B8-html-css-%EC%82%AC%EC%9A%A9%EA%B8%B0-75d9fb6062e6
http://www.daleseo.com/webpack-basics/