webpack-2

webpack은 여러개 파일을 하나의 파일로 합쳐주는 번들러(bundler)다.

하나의 시작점(entry point)으로부터 의존적인 모듈을 전부 찾아내서 하나의 결과물을 만들어 낸다.

main.js부터 시작해 fun.js 파일을 찾은 뒤 하나의 파일로 만드는 방식이다.

 

webpack cli 설치

npm install -d webpack webpack-cli

 

webpack 커맨드 (3가지 필수)

.\node_modules\.bin\webpack --mode development  --entry .\src\main.js  --output dist\main.js

해도 되지만 안쓸꺼니까 패스

 

//webpack.config.js

const path = require("path")

module.exports = {
  mode: "development",
  entry: {
    main: "./src/main.js",
  },
  output: {
    filename: "[name].js",
    path: path.resolve("./dist"),
  },
}

//package.js
{
  "scripts": {
    "build": "webpack"
  }
}

//index.html
<script src="dist/main.js"></script>

설정 하고 npm run build