03. 웹팩(webpack) express 연동, 핫리로딩

2018.03.18 in Frontend

2번 바벨 포스팅에 이어서 웹팩을 셋팅해보자! 웹팩3(3.8.1) 환경에서 테스트하였다.

우선 node express에 웹팩을 붙여보자.

npm i express --save
npm i babel-register --save-dev
mkdir src/server
touch src/server/main.js src/server/express.js

src/server/main.js

1 2	require("babel-register") require("./express")

babel-register를 선언해주면, 다른 require 에서도 babel을 적용시킬 수 있다. require('./express') 안에서 ES6 문법인 import를 사용할 것이다. nodejs는 해당 문법을 디폴트로 제공해주지 않는데, babel-register를 통해 require를 사용하는 모듈들 안에도 최신 JS 문법을 사용할 수 있게 해준다!

src/server/express.js

import express from "express" // import 사용이 가능하다!
import path from "path"

const server = express()
const webpack = require('webpack')

// webpack의 output 장소인 dist를 express static으로 등록한다.
const staticMiddleWare = express.static("dist");

// webpack 설정
const config = require("../../config/webpack.dev.js")
const compiler = webpack(config);

// 웹팩을 미들웨어로 등록해서 사용하기 위한 모듈
const webpackDevMiddleware = require("webpack-dev-middleware")(
    compiler,
    config.devServer
)

// 웹팩미들웨어가 static 미들웨어 이전에 위치!
server.use(webpackDevMiddleware);
server.use(staticMiddleWare);

server.listen(8080, () => {
    console.log("Server is Listening")
});

자 그럼 node src/server/main.js 를 실행해서 express 서버를 구동시켜보자.

localhost:8080 포트를 통해 dist 파일 내용들을 확인할 수 있다.

핫 리로딩

매우 경이롭게 자동으로 파일들이 다시 리로드되는 셋팅이다.

src/server/express.js

import express from "express"
import path from "path"

const server = express()
const webpack = require('webpack')

const staticMiddleWare = express.static("dist");
const config = require("../../config/webpack.dev.js")
const compiler = webpack(config);

const webpackDevMiddleware = require("webpack-dev-middleware")(
    compiler,
    config.devServer
)

// 핫 로딩 미들웨어를 추가하자!
const webpackHotMiddleware = 
    require("webpack-hot-middleware")(compiler)

server.use(webpackDevMiddleware);
 // 웹팩dev 미들웨어 다음, static 미들웨어 이전
server.use(webpackHotMiddleware);
server.use(staticMiddleWare);

server.listen(8080, () => {
    console.log("Server is Listening")
});

config/webpack.dev.js

const path = require("path")
const webpack = require("webpack")
// HTML 핫 리로딩을 위해 필요한 플러그인
const HTMLWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
      main: ["./src/main.js"]
  },
  output: {
    filename: "[name]-bundle.js",
    path: path.resolve(__dirname, "../dist")
  },
  devServer: {
    contentBase: "dist",
    overlay: true,
    // 웹팩의 상태값에 색상을 부여한다.
    stats: {
      colors: true
    },
    // hot 프로퍼티를 true로 설정!
    hot: true
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: "babel-loader"
          }
        ],
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader"
          }
        ]
      },
      {
        test: /\.html$/,
        use: [
          // 원래 extract-loader와 file-loader가 있었다.
          // 그러나 html을 핫리로딩 시키기 위해서는 위 로더 대신 HTML 웹팩 플러그인을 사용한다!
          {
            loader: "html-loader",
            options: {
              attrs: ["img:src"]
            }
          }
        ]
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "images/[name].[ext]"
            }
          }
        ]
      }
    ]
  },
  // Hot 모듈과 HTML웹팩 플러그인을 추가한다.
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new HTMLWebpackPlugin({
      template: "./src/index.html"
    })
  ]
}

/main.js : 클라이언트 main.js 파일에 핫 리로드 되는 결과를 전달받을 수 있게한다.

require("babel-runtime/regenerator")
require("webpack-hot-middleware/client?reload=true")
require("./main.css");
require("./index.html");

config/webpack.dev.js와 server 파일들 자동 리로딩

서버측 파일 및 config파일은 위 셋팅으로 자동으로 리로딩 되지 않는다. 서버측 파일을 리로딩 시키기 위해서는 nodemon을 활용한다.

npm i -g nodemon

nodemon –watch config –watch src/server src/server/main

서버와, 프론트 코드 모두가 새로고침 없이 리로딩 되는것을 확인할 수 있다!!

Reference

https://www.udemy.com/webpack-beyond-the-basics

nodejs의 import 지원 : https://stackoverflow.com/questions/39436322/node-js-syntaxerror-unexpected-token-import

babel-register : https://jaeyeophan.github.io/2017/05/16/Everything-about-babel/

Comment and share

03. 웹팩(webpack) express 연동, 핫리로딩

핫 리로딩

Reference

Junho Nam