NodeJS - Webpack DIY server #nodejs #node

express.js

import express from 'express';
import path from 'path';


const server = express();

///note: in development, we need to have this ability of having a `live reloading experience` when changing some codes in front-end. So we need to make use of webpack libraries.

const webpack = require("webpack");
const config = require("../../config/webpack.dev.js");
const compiler = webpack(config);
// const server = require("webpack-dev-server");

const webpackHotMiddleware = require("webpack-hot-middleware")(compiler); //we use this npm package to reload our DIY webpack dev server automatically when there are changes in front-end files

const webpackDevMiddleware = require("webpack-dev-middleware")(
    compiler,
    config.devServer //refer to `devServer` object in webpack.dev.js
);

server.use(webpackHotMiddleware);
server.use(webpackDevMiddleware);

///END

const staticMiddleware = express.static("dist");
server.use(staticMiddleware);

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

main.js

require("babel-register"); //this library tells babel to transpile the code in ./express we've set in .babelrc file (remember, we're not using webpack-dev-server anymore here so we need to call .babelrc manually).
require("./express");

webpack.dev.js

const path = require("path");
const webpack = require("webpack");
const HTMLWebpackPlugin = require("html-webpack-plugin");


module.exports = {
  entry: {
    main: ["core-js/fn/promise", "./src/index.js", "./src/main.js"] //bundle 1. Our main entry point. We can also have an array of entry points in this property instead of single file
  },
  mode: "development", //two modes: `development` or `production`
  output: {
    filename: "[name]-bundle.js", //output filename. with [name] as parameter, it takes all the entry codes in `entry.main: []`
    path: path.resolve(__dirname, "../dist"), //output from webpack will be saved in this directory. We used path.resolve to get the absolute path of the folder directory
    publicPath: "/" //note: research more on this one
  },
  devServer: { //use this object to configure webpack-dev-server
    contentBase: "dist", //for specifying the main folder when we run and use webpack-dev-server
    overlay: true, //use this flag to display the error in the browser window
    hot: true, //for webpack-hot-middleware library
    stats: {
      colors: true //used to color the command info on webpack when using nodejs to create your own webserver
    }
  },  
  devtool: "source-map", //uses the actual code instead of transpiled code during debugging in chrome DevTools
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: "babel-loader"
          }
        ],
        exclude: /node_modules/ //we need to exclude node_modules from being transpiled by babeljs
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader"
          }
        ] //we specify our loaders in use array. It works in reverse order (`css-loader` first then `style-loader`)
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader", //Exports HTML as string. HTML is minimized when the compiler demands. Then passes it over to extract-loader.
            options: {
              attrs: ["img:src"]
            }
          }
        ]
      },
      {
        test: /\.(jpg|gif|png)$/, //note: we add a loader for loading the image within html
        use: [
          {
            loader: "file-loader",
            options: {
              name: "images/[name]-[hash:8].[ext]" //note: we can also use hash on the naming scheme of the image(see [hash:8])
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(), //for webpack-hot-middleware library
    new HTMLWebpackPlugin({
      template: "./src/index.html"
    })
  ]
};