Invalid configuration object on webpack-dev-server

[troddick]

I am fairly new to angular2, leaflet and webpack, so I apologize if this is a newbie question.
I cloned the app, ran npm install, npm run build and am able to see the public/index.html. This works fine as long as after each update to the code, I run npm run build and refresh my page. I tried using the webpack-dev-server, but I get the following error (see image below). I would like to debug the code in the browser as I do further development and am not sure how to do that. I'm assuming if the webpack-dev-server was successful, I'd be able to debug by using that. Is this true or is there another way I can debug my code? Primarily, how do I fix the errors that are showing? I've tried adding the webpack-dev-server with 'npm install webpack-dev-server --save-dev', but I still get the same errors. I then uninstalled it, as it seems you do not have that in your packages.js file either.
Thanks for a great starter app!

[haoliangyu]

Hey @troddick , thank you for reporting this problem.

It seems that the webpack-dev-server was parsing the webpack configuration with the v2 standard, while the current configuration was written based on webpack v1.

I will rewrite the configuration soon. Before that, the error message suggests several changes you can make in the webpack configuration:

• remove the debug property
• remove the preLoader property and the array
• use an absolute path at the output.path property
• remove the empty string at the array for the resolve.extension property.

Let me know if this will help :)

[troddick]

I spent this morning learning webpack2, updating the packages and the webpack.config.dev.js and webpack.config.prod.js and rebuild the node_modules folder.
I have been able to successfully (without cmder errors) run webpack-dev-server. The only issue that remains is an error I'm getting in the browser:

I have no idea. Seems related to the reflect-metadata lib, but I'm not sure what I'm missing that needs to be added to fix this.
I'd be happy to share the webpack.config files and new packages.js with you, if you're interested ... with or without help on this (help would be nice though).

Thanks

[haoliangyu]

Hmm, the reflect-metadata library should have been included in the public_src/libs.ts. If you can create a branch or submit a PR about the webpack update, I can help you debug it :)

[troddick]

https://github.com/troddick/SiGL_Mapper
Here is my repo using your starter. Thanks so much for helping me. I searched all day yesterday for some hint as to how to fix this, with no luck. Everything I found just said to make sure to have 'import reflect-metadata;' and that is already in there, so I'm not sure how it changed going from webpack1 to webpack2.

[troddick]

By removing the libs.ts from the webpack.config's entry and instead doing 'import ./libs'; at the top of bootstrap.ts, this reflect-metadata error goes away.
But now I've realized that the public folder is not getting updated. My file explorer shows the last app.[hash].bundle was built 2 days ago, but I can still do webpack-dev-server and see my updates at localhost:8080, but if I add /public/index.html, it's an older version. Something is off in my webpack.config files.

[haoliangyu]

Yeah, running webpack-dev-server doesn't actually write the files into your disk, but to the memory. If you want to update your build folder, use webpack command directly or the write-file-webpack-plugin
plugin.

[haoliangyu]

I am closing this issue because you have figured it out 🎆

[troddick]

The output: path was making it create a public folder within the webpack folder instead of going up 2 levels first. I have fixed that. But now I need to make the images stay in the images folder and not get bundled at the same level as the app.

[haoliangyu]

@troddick try to set the name option of file-loader:

{ test: /\.(png|gif|jpg)$/, use:[{ loader: 'file-loader', options: { name: 'images/[name].[ext]'} } ]}