Updated everything

[knoxfighter]

Packages (updated to Webpack only):

• Removed:
  • babel-core
  • babel-preset-es2015
  • babel-preset-react
  • react-console-component
  • sweetalert
  • style-loader
• Added:
  • @babel/core
  • @babel/preset-env
  • @babel/preset-react
  • @fontawesome/fontawesome-free (updated to v5)
  • admin-lte (updated to v3-alpha.2)
  • bootstrap (updated to v4)
  • bootstrap-fileinput
  • classnames
  • file-loader
  • jquery
  • mini-css-extract-plugin
  • node-sass
  • optimize-css-assets-webpack-plugin
  • prop-types
  • react-router-dom
  • resolve-url-loader
  • sass-loader
  • sweetalert2
  • sweetalert2-react-content
  • webpack-cli
  • webpack-fix-style-only-entries
• Updated:
  • babel-loader 6.2.1 -> 8.0.0
  • react 15.0.1 -> 16.4.2
  • react-dom 15.0.1 -> 16.4.2
  • react-router 2.3.0 -> 4.3.1
  • semver latest -> 5.5.0
  • css-loader 0.23.1 -> 1.0.0
  • webpack 1.13.0 -> 4.16.5

While updating all packages i also decided to move from plain webpack to laravel-mix. Laravel-mix also provides a compiler for scss. Now it is possible to write sass-code, so the old css-files are not needed.
Every library is know added directly into the bundle files bundle.js and bundle.css. Images and Fonts that are used by those libraries are also automatically moved into vendor folders by laravel-mix.
The used adminLTE version is 3 alpha 2, so we have the possibility to use bootstrap 4, which is much better, than version 3 😄

Many different things in the frontend had to be adjusted. I tried to find all bugs, but i i don't trust myself with, so further testing from your site, or other people will needed. Also, if the design is not correct, or looks ugly, just write it, so i can change it.

For more informations what i did, just ask me, i will anwser all questions or help with problems^^

PS: I deleted 226,154 lines of Code ... cleanup op 🤣

EDIT: Updated Packages to the webpack-only version

[mroote]

Do we need to pull in laravel-mix over just webpack? Webpack itself should be able to do any css compilation you need.

[knoxfighter]

That is true, but it is much more comfortable, it also only needs 4 lines of code to manage everything, it can easily compile into different files. I tried it many hours to make it work with webpack directly and i didnt managed it. I sse no problem in using laravel-mix, it is also licensed under the MIT-license https://github.com/JeffreyWay/laravel-mix/blob/master/LICENSE.
Additionally laravel-mix manage fonts, grafics and so on directly and move them into vendor folders.

[mroote]

Webpack can do all these things and version 4 simplifies a lot of the configuration. Laravel-mix appears to be a tool specifically for Laravel PHP applications and does not seem to fit into this application. I'd try to get it working with Webpack as I really don't want to pull another build tool into the application especially when it's poorly suited to the requirements.

[knoxfighter]

It was originally created to be used with Laravel PHP applications. It is also only a wrapper around webpack, to make the syntax much easier and can be used in every . I tried to make it with webpack 4, but i didnt get multiple inputs and outputs to work at all. Would be great to have something like that in webpack directly, but i dont think so. And writing everything in the bundle.js file, is a very bad style (in my opinion).
In my opinion laravel-mix is not only for laravel, it is useful in every application that uses a javaScript based frontend. I like laravel-mix and use it in most of my applications.
Also i think, using webpack 4 with all the things, i want to have, will be a very big task and much much configuration stuff.

[mroote]

It seems to me that webpack 4 should be able to do everything here. See the assets management docs to see how you can move around images and other files https://webpack.js.org/guides/asset-management/.

Webpack has a much wider usage, even if it is more complicated to get setup. I'd rather stick with it then pull in another build tool.

[knoxfighter]

After more than 12 hours of trying to make it work with webpack only, i managed to build javascript, with react. But compiling scss is a completly different story :( I think, the scss-code gets compiled correctly, but when it comes to loading files, it throws some errors, i dont understand.

ERROR in ./ui/index.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./ui/index.scss)
    Module not found: Error: Can't resolve '../img/loading.gif' in '.../factorio-server-manager/manager/ui'
     @ ./ui/index.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./ui/index.scss) 7:341197-341226 7:346439-346468 7:348835-348864
    
    ERROR in ./ui/index.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./ui/index.scss)
    Module not found: Error: Can't resolve '../webfonts/fa-regular-400.eot' in '.../factorio-server-manager/manager/ui'
     @ ./ui/index.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./ui/index.scss) 7:337505-337546 7:337577-337618

Do you know, why this error occures? If not, i will ask on stackoverflow.
Currently im working on a new branch for this: https://github.com/knoxfighter/factorio-server-manager/tree/Feature/update-everything-webpack-only
webpack-config: https://github.com/knoxfighter/factorio-server-manager/blob/Feature/update-everything-webpack-only/webpack.config.js

[knoxfighter]

So, thanks to a guy on stackoverflow, i now know, that the only thing i needed was the resolve-url-loader. So i fixed that and also added sourceMaps an CSS-minifications again.
Now everything i had, with laravel-mix is implemented webpack-only.

[knoxfighter]

push

[mroote]

Hey sorry for the delay! This looks great thanks for the taking the time time to do the cleanup and switching to new versions of webpack.

I'm having some issues with my local environment at the moment but I'll merge this PR into develop for now and test it out