Setting up Webpack via Laravel Mix

[andrelandgraf]

Webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging.

Laravel Mix is an abstraction layer on top of Webpack.

[andrelandgraf]

Current browser do not yet support all es6 features, like modules. However, using modules is essential for writing clean and readable javascript code. Laravel Mix is a layer on top of webpack to bundle css and js files after self defined rules.

This gives us the possibility to work with all of today`s css preprocessors (sass, scss, ...) and to maintain a more sophisticated js folder structure.

[andrelandgraf]

Laravel Mix also abstracts ESLint: https://www.npmjs.com/package/laravel-mix-eslint

=> I had some problems getting the laravel-mix-eslint npm package running and now removed it. For now, ESLint will run on its own.

• We also need an own ESLint logic apart from Laravel Mix to configure PhpStorm
• Moreover, to implement a Github Commit Hook, we need an own instance of ESLint See #13 for more details.

[andrelandgraf]

Move js-folder structure from public/js to assets/js: Done 👍
Add laravel mix command to build js files into public/js: Done 👍 TODO: select css preprocessor for the example component (see #3)

[andrelandgraf]

nice instructions for how to get webpack running without laravel mix: https://github.com/wesbos/es6.io/blob/master/13%20-%20JavaScript%20Modules%20and%20Using%20npm/es6-module-instructions.md

[andrelandgraf]

Getting some help with Laravel Mix from reddit: https://www.reddit.com/r/laravel/comments/93py75/larvel_mix_how_to_debug/