[DX] Change the way that compiling looks like

[CosmeValera]

🧠 WHY?

With this now every time we start again the project, it will not open a new window, but instead it will show the message in the terminal, with the URL that allows to be clicked and this way we will improve the developer experience. In addition we are showing some visual hints with color and text:

📷 IMAGES

• blue = compiling

• red = failed

• green = success

💻 CODE

webpack.config.js:

const HtmlWebPackPlugin = require("html-webpack-plugin");
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const path = require('path')

const deps = require("./package.json").dependencies;

const printCompilationMessage = (status, port) => {
  let messageColor, messageType, browserMessage

  switch (status) {
    case 'success':
      messageColor = '\x1b[32m'
      messageType = 'Compiled successfully!'
      browserMessage = 'You can now view'
      break
    case 'failure':
      messageColor = '\x1b[31m'
      messageType = 'Compilation Failed!'
      browserMessage = 'You can\'t now view'
      break
    case 'compiling':
      messageColor = '\x1b[94m'
      messageType = 'Compiling...'
      browserMessage = 'Compiling the'
      break
  }

  console.log(`\n\n
${messageColor}${messageType}\x1b[0m\n
${browserMessage} \x1b[1mRemote\x1b[0m in the browser.
${messageColor}${messageType}\x1b[0m\n
\x1b[1mLocal\x1b[0m:  http://localhost:\x1b[1m${port}\x1b[0m
\x1b[1mLocal\x1b[0m:  http://localhost:\x1b[1m${port}\x1b[0m\n\n
  `)
}

module.exports = (_, argv) => ({
  output: {
    publicPath: "http://localhost:3000/",
  },

  resolve: {
    extensions: [".tsx", ".ts", ".jsx", ".js", ".json"],
  },

  devServer: {
    port: 3000,
    historyApiFallback: true,
    watchFiles: [path.resolve(__dirname, 'src')],
    onListening: function (devServer) {
      const port = devServer.server.address().port

      printCompilationMessage('compiling', port)

      devServer.compiler.hooks.done.tap('OutputMessagePlugin', (stats) => {
        setImmediate(() => {
          if (stats.hasErrors()) {
            printCompilationMessage('failure', port)
          } else {
            printCompilationMessage('success', port)
          }
        })
      })
    }
  },

  module: {
    ...
  },

  plugins: [
    ...
  ],
});

package.json

{
...
  "scripts": {
    "start": "webpack serve --mode development",
    "start:live": "webpack serve --mode development --live-reload --hot",
    "build": "webpack --mode production",
    "build:dev": "webpack --mode development",
    "build:start": "cd dist && PORT=3000 npx serve"
  },
...
}

Final thoughts

I think it would be quite a good add on for the project. It could also be added to all templates that use webpack. So I think you should consider it. Also if you tell me that you are okay with the idea, I am perfectly fine with creating a PR with these changes for your project, I think that this create-mf-app project is very useful for the MF community. Thanks for reading and I wait for your answer 💓💓

[jherr]

Looks really cool. It's certainly the most informative message I've seen from a webpack config!

[jherr]

So, yes, please PR.