[webpack] Development

https://webpack.js.org/guides/development/

웹팩에는 개발(development)모드에서 사용할 수 있는 유용한 기능이 있다.

 

Source Maps 사용하기

에러발생시 번들링된 결과파일의 에러정보를 알려주면, 원본파일에서 에러를 찾기가 쉽지 않다. Source Maps을 이용하면 원본파일의 에러정보를 바로 알 수 있으므로 매우 편리하다. 매우 다양한 옵션이 있지만 여기서는 inline-source-map 옵션을 사용해 본다. webpack.config.js 파일에 devtool 속성값으로 'inline-source-map'를 할당하면 된다.

// webpack.config.js
module.exports = {
  entry: './src/index.js',
  output: {
    ...
  },
  devtool: 'inline-source-map',
  ...
}

 

Development Tool 선택하기

웹팩의 컴파일 대상이 되는 src 코드가 수정되면 자동으로 몇가지 컴파일되는 개발도구가 있다. 그 중에서 Watch Mode와 webpack-dev-middleware를 알아본다.

 

1. webpack's Watch Mode

Watch Mode로 웹팩을 실행하면 한번만 컴파일 되고 종료되는 것이 아니라, 웹펙이 종료되지 않고 src 코드가 수정될 때마다 자동으로 컴파일해준다.

"scripts": {
    "build": "webpack --watch"
}

 

2. webpack-dev-middleware

Express로 서버를 만들었다면, webpack-dev-middleware 모듈을 이용해서 수정된 src 코드를 자동으로 컴파일할 수 있다. 참고로 webpack-dev-server도 내부적으로 webpack-dev-middleware를 사용한다. 우선 모듈을 설치한다.

npm i -D webpack-dev-middleware

webpack-dev-middleware을 이용해서 컴파일된 결과는 파일로 생성되지 않고 메모리에 생성되는데, 컴파일 결과에 접근하기 위해서는 webpack.config.js 파일에 접근하고자 하는 path를 publicPath 속성값에 할당하면 접근이 가능하다.

(참고링크: https://webpack.js.org/configuration/dev-server/)

// webpack.config.js
module.exports = {
  ...
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, "dist"), // absolute path
    publicPath: '/assets'
  }
  ...
}

Express를 실행하는 서버파일에 webpack-dev-middleware를 미들웨어로 추가한다. 여기에서 publicPath 속성값이 사용된다.

// app.js
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');

const app = express();
const config = require('./webpack.config.js');
const compiler = webpack(config);

app.use(webpackDevMiddleware(compiler, {
    publicPath: config.output.publicPath
}));

html 파일에서 js 파일을 읽어 들일때 publicPath 속성값에 설정한 path로 접근한다.

<script src="assets/main.js"></script>

서버파일을 실행시킬때 nodemon을 이용하면 서버파일 수정시에도 자동으로 서버가 재실행므로 개발시에 편리하다.