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

You mentioned you got it running by installing globally. So what is the issue now? — Tarun Lalwani, Jul 04 '18 at 17:34
Yes, I got it to "build" but it does not work, I am trying to configure it to mirror what I had with webpack-dev-server — chobo2, Jul 04 '18 at 17:37
try running it from your node_modules folder like this node_modules/bin/webpack-serve — Sachin Bhandari, Jul 10 '18 at 02:31

zenoh · Accepted Answer · 2021-07-06T11:43:53.027

3

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

edited Jul 06 '21 at 11:43

answered Jul 04 '18 at 19:53

zenoh

2,071
1
22
38

I am not using yarn, so I had to change it to "start"(as I don't know how to change the scrip flag anymore). Anyways I did get it to run! but when I try to build off your example like trying to add routing, hot realoading and even trying to get the browser to open. I get options['add'] is an invalid additional property, where options["add"] could be any setting I try to add. – chobo2 Jul 05 '18 at 21:59
I also see you have stuff like webpack-command but I don't really know what they do. – chobo2 Jul 05 '18 at 22:00
Excellent, but webpack-command seems to be deprecated and we better stick to webpack-cli – Mehdi Oct 20 '18 at 05:26

How to get up and running with webpack-serve?

1 Answers1

Linked