How to get up and running with webpack-serve?

Question

I am trying to use webpack-serve(not dev-server) and I am a bit confused on how to actually run it.

I installed it, I have npm, webpack 4 and using VS Code with command line.

It seems to me I should just put "webpack-serve" and it should run but I just get

'webpack-serve' is not recognized as an internal or external command,
operable program or batch file.

Do I need to set some pathing or something along those lines?

Edit

I got it to "Build" by installing it globally.

I am now trying to get webpack-serve to function exactly like what I had when I was using webpack-serve but right now it is not(it does not open the browser, not sure how switch between dev mode and production mode and not sure how to get routing to work)

I have made an example here: https://github.com/chobo2/webpack-serve-example

Answer 1

It is NOT recommended to install webpack or any webpack related tools globally so I'd recommend you uninstall all of them globally (NPM and Yarn) first..

I started a new project and created 3 webpack config files:

• webpack.common.js
• webpack.dev.js
• webpack.prod.js

In our package.json:

"scripts": {
  "serve": "webpack-serve --config webpack.dev.js",
  "build": "webpack --config webpack.prod.js"
}

The thing I learned about webpack-serve is we have to define a serve object in our webpack config:

const path = require('path');

module.exports = {
  // other configs ....
  serve: {
    // a minimal example 
    content: path.resolve(__dirname, "dist")
  }
}

We will run our project by calling package.json scripts only,

e.g. yarn run serve or yarn run build

The full example is on Github