[Webpack] dev server 구동하기

프로젝트 생성하기

$ cd /my/project/path
$ mkdir firstProject
$ cd firstProject
$ npm init -y
$ npm install --save-dev webpack
$ npm install --save-dev webpack-cli

webpack은 global로 설치하는것을 권장하지 않는다고 합니다.

local로 설치하세요.

 

webpack.config.js 파일 생성하기

$ touch webpack.config.js

파일을 열어서 config 코드를 작성합니다.

var path = require('path');

module.exports = {

};

webpack-dev-server 설치

$ npm install --save-dev webpack-dev-server

webpack.config.js 파일에 devServer를 추가합니다.

var path = require('path');

module.exports = {
    devServer: {
        host : '127.0.0.1',
        contentBase: path.join(__dirname, "/"),
        compress: true,
        hot : true,
        inline: true,
        port: 9000,
        open : true
      }
};

반응형

npm script 추가

프로젝트 폴더에서 webpack을 실행하기 위해서는 아래와 같은 명령을 사용해야 합니다.

$ ./node_modules/.bin/webpack --version

npm 스크립트에 추가하여 실행코드를 줄여보겠습니다.

package.json 파일에 scripts 노드를 수정합니다.

{
  "name": "firstProject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {},
  "devDependencies": {
    "webpack": "^4.35.0",
    "webpack-cli": "^3.3.5",
    "webpack-dev-server": "^3.7.2"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "server": "./node_modules/.bin/webpack-dev-server",
    "build": "./node_modules/.bin/webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

scripts에 server와 build 노드를 추가했습니다.

 

dev server 구동하기

$ npm run server

webpack.config.js 파일에 devServer에 open: true 로 설정했기 때문에 webpack dev server가 구동되면 크롬이 즉시 실행됩니다.