Document usage of `metadata` object (webpack-dev-server)

[mike-morr]

I am having trouble figuring out how to get webpack-dev-server working with the config-env-development.

Here is my config:

const generateConfig = require('@easy-webpack/core').generateConfig;
const glob = require("glob");

const baseConfig = {
  entry: {
    'pnp': ['./src/pnp'],
  },
  output: {
    path: "./dist",
    filename: "[name].js"
  }
}

//if (NODE_ENV = "development") {
    module.exports = generateConfig(
        baseConfig,
        require('@easy-webpack/config-env-development')({ port:3000, host: 'localhost:3000' }),
        require('@easy-webpack/config-typescript')(),
        {devtool: 'source-map'}
    );
//}

I am calling it like this:

webpack-dev-server --config webpack.config.js

It compiles fine and I get the output fine, but there is no server running. Any help would be greatly appreciated. Great work btw!!

┆Issue is synchronized with this Asana task

[mike-morr]

Not sure if this is the intended way or not, but if I pass the port and host via cli it works properly. Is this the right way for easy-webpack or should I be able to pass it in the config?

[niieani]

Actually, config-env-development doesn't yet allow passing in port/host as configuration options.
There's an undocumented metadata configuration object that's used to set host and port throughout all the settings.
What you can do if you want to override the port and host by adding the following object as a parameter togenerateConfig, after config-env-development:

      devServer: {
        port: 1234,
        host: 'localhost'
      },

Also note that your host contained the port, which is incorrect: 'localhost:3000'.

[juliangut]

Thanks for the heads up on metadata just what I was looking for

I find webpack docs confusing and frustrating, though the tool is awesome

[Saeris]

I ran into this same issue while trying to configure Easy-Webpack to work with Redhat's OpenShift platform this week. My solution was just to pass a metadata object in along with the baseconfig as follows:

const baseConfig = {
  entry: {
    'app': ['./src/main'],
    'aurelia-bootstrap': ['./index'].concat(coreBundles.bootstrap),
    'aurelia': coreBundles.aurelia.filter(pkg => coreBundles.bootstrap.indexOf(pkg) === -1)
  },
  metadata: {
    port: server_port,
    host: server_ip_address,
  },
  output: {
    path: outDir,
  }
}

I'm still running into problems with my configuration that I suspect are related to other server settings (specifically in regards to socksjs and possibly headers, I'm new to the platform I'm trying to use). Having an easy way to set these environment specific variables or at least documentation on where they can be set would be great. It's just been frustrating having to dig through the source code and guessing how to pass in the right values in the right places.

[niieani]

@Saeris indeed, very good points. I just don't have enough time to do it all :( If somebody here would like to help with docs, I'm all for it.