Webpack upgrade

[salixzs]

Are there any plans on updating webpack. Webpack 4 has this --mode switch, which can simplify webpack configuration files.

[Nordes]

I tried to update it, but there are some packages that were not working without doing anything. If you can help :) I think that @MarkPieszak would be happy.

I will try again tomorrow if I have time. Note that I am not an expert with Webpack.

Note: manual to upgrade -> https://webpack.js.org/guides/migrating/

Current dependency not upgrading:

• aspnet-webpack :heavy_exclamation_mark: (Warning of deprecated call, use .hook)
• webpack-dev-middleware
• extract-text-webpack-plugin :heavy_check_mark:

[Nordes]

@salixzs on my branch, I was able to update pretty much everything in order to make it work. However I have the following message (warning, however, I don't know at what extent it affect the modules):

fail: Microsoft.AspNetCore.NodeServices[0]
      (node:4060) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
fail: Microsoft.AspNetCore.NodeServices[0]
      (node:4060) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead

See my branch if you want to try out/fix it: https://github.com/Nordes/aspnetcore-Vue-starter/tree/feature/85-webpack-Update

Regarding the fail message: https://github.com/aspnet/JavaScriptServices/issues/1499 (Basically it will work, but you'll get the notice, which is not great. The dev-middleware and aspnet-webpack needs to be upgraded to use .hook instead of .plugin.)

[MarkPieszak]

Nice job @Nordes ! :+1: I think we just need to update ExtractTextPlugin in the package.json

https://github.com/webpack/webpack/issues/6568

If that works we can definitely upgrade it and get those awesome perf boosts 🥇 You guys rock!

[skozzii]

You guys are awesome, I come across this problem to come here and see it actively being solved, Fantastic!

[Nordes]

@MarkPieszak actually the extract text plugin is updated on my branch. However, the depreciation warning is regarding NodeServices (link between Dotnet core and node webpack). The warning doesn't stop the application from working (see link in my previous reply).

Later today I'll do some cleanup and if you're OK to have the text plugin in 4.0.0-beta.0 and the warning stated earlier than I'll do the pull request.

[MarkPieszak]

That'd be amazing :+1: Whatever you think will help !

[salixzs]

Thank you for trying. I believe problems will not end as I doubt we can get --mode switch from libraries between aspnet core and webpack (JavaScript services, webpack middlewares etc.)

[Nordes]

@salixzs if you look at my branch I use the - - mode development while in dev and production when publishing the app. I don't understand your comment? Basically you could even push it using a dot net environment variable.

Actually I added it in the webpack configuration file (both of them).

[salixzs]

Sorry I cannot contribute enough to you. I am just investigating possibilities in my (small) free time project). Also I am doing it from scratch (TypeScript version) just looking in this great repository for reference - how you, smart guys, are doing this. I was hoping to go more heavy on using --mode switch value in webpack config file, like this:

module.exports = (env, argv) => {
    const isDevBuild = argv.mode === 'development';

when you run this from Visual Studio Build, then this works, because it is added in csproj file, just like in your branch, BUT, when you want those "hot reloading" bells and whistles, then existing middleman solutions does not provide this switch and webpack is failing. Of course, it can be handled in webpack config file, but to have nice and clear Webpack 4 solutions - it is yet something we have to wait from other repos to implement, P.S. I believe you can also remove const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') from webpack config as it is also now done by Webpack, but I may be wrong here (still learning this stuff).

[ghost]

has anyone gotten JavaScriptServices debugging working with webpack4? i doesn't seem to hit the break points. I think it has to do with the way chunking has changed, but not sure. I can still however hit break point in Chrome web developer, but not VS

[Nordes]

@fhinchey : I've actually updated my branch (Fork with implementation of Webpack 4), normally you should be able to debug the Vue file from VS Code (From visual studio 2017, I don't really know if ti is possible)

Sample while debugging and clicking on Increment Counter:

Ref:

• https://webpack.js.org/configuration/devtool/ (WebPack configuration)
• https://github.com/Microsoft/vscode-recipes/tree/master/vuejs-cli

[adamsproul]

@Nordes thank you, this was exactly what I needed to upgrade to webpack 4.

One small note is that if you update the vue-loader to 15, need to add a plugin to webpack, as per https://vue-loader.vuejs.org/migrating.html#a-plugin-is-now-required.

Is there any update on getting this merged in to the main branch for the project?

[pank789]

@Nordes @MarkPieszak

I have used the template provided by dotnet cli with vue. I have updated the version of asp.net core version to 2.1.

I am just a starter in this techs and did research as i can and successfully complied the template with webpack 4, but need your help on confirming the same.

I removed all the old components which are marked deprecated for webpack 4 except the aspnet-webpack one. Alternative need to find didn't spent much time on it.

Please let me know, if you can help in verifying, i will share the details later for verification.

Note: - Not using babel yet.

[mikaelweave]

Hi @pank789!!

Can you fork this repository and commit your proposed changes to the forked version so we can take a look?? I'll go ahead and try it on my machine to help verify. :smile_cat:

Let me know if you need any help or have any questions! Feel free to email me (my email is in my profile).

Mikael

[pank789]

hi Mark,

I will do that ,but would some need time as i am having trouble with my laptop and other one doesnt allow github to be accessed, since have acess restriction on it.

On Tuesday, July 10, 2018, Mikael Stadden notifications@github.com wrote:

Hi @pank789 https://github.com/pank789!!

Can you fork this repository and commit your proposed changes to the forked version so we can take a look?? I'll go ahead and try it on my machine to help verify. 😸

Let me know if you need any help or have any questions! Feel free to email me (my email is in my profile).

Mikael

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/MarkPieszak/aspnetcore-Vue-starter/issues/85#issuecomment-403704865, or mute the thread https://github.com/notifications/unsubscribe-auth/AnGnR3ariBV6JHyKl8seWuY5DbYrUxyNks5uFDuxgaJpZM4Sutdw .

[MarkPieszak]

Np! Just let me know, excited to take a look! @pank789

[pank789]

@MarkPieszak @Nordes I have updated my repo with the webpack 4 changes.

I am not aware how you run via the script from the package. json. I did it using vs 2017 build and tested the code is compiling and running fine and debugging in chrome.

I updated remaining libs to latest except the one related with fontawesome, those have some issue and i am not aware of them at all.

Please check the three files, package.json, webpack.config.js, webpack.config.vendor.js.

Note: i haven't work on optimization part, as i am new bie to webpack and JS frameworks.

I am working with ts files like they came in microsoft starter kit and can debug them from vs easily.

[sksallaj82]

I tested the above repo by @pank789 and it worked on my end, using it for a possible production project.

[0xgeert]

Hi guys, what's the status on this? Possibly able to help.