Why webpack ?

[hiousi]

Hi all,

 

Why does Prestashop 7 use webpack?

I'm just asking that while I'm looking at the demo source code compared to Webpack goals.

 

That is the end of Prestashop 7 demo page HTML source code, when Javascripts are loaded:

 

 

And that what says Wepback doc (https://webpack.github.io/docs/motivation.html)

 

webpack is a module bundler

 

Appart the fact that we have 8 files to load (where is bundling?) there are only core.js and theme.js processed by Webpack. The others file are just plain legacy js (even jquery.ui!!)

 

Why using webpack if it is not used to manage dependencies between all modules? (understand "modules" in the sense of webpack, aka used to build assets)

 

[gabdara]

Webpack is not used to bundle scripts from all PrestaShop modules that are loaded, that I think is the job of CCC feature.

The file core.js is the result of bundling https://github.com/PrestaShop/PrestaShop/tree/1.7.0.x/themes/_core/js and theme.js the result of bundling https://github.com/PrestaShop/PrestaShop/tree/1.7.0.x/themes/classic/_dev/js

[hiousi]

@gadbara thanks for confirming.

Since you understand the sense of the question, why using webpack to only bundle a small part of the app?

[gabdara]

Someone from the PrestaShop team will have to respond that.

My guess is that for the end merchant that will use the platform it's easier to add/remove modules and have them combined by CCC instead of webpack. Webpack would be a little too technical for them, would require to configure a development environment that it's out of their scope, while CCC can combine all scripts at the push of a button. For core and theme scripts (even individual modules) which are made by developers, webpack makes sense to bundle all small pieces into a one final, ready to just use, script.

[hiousi]

I agree that the ability  to add / remove modules (and even themes) easily is a need of a modern CMS platform.

Developpers need to be able to extend with modules and themes without modification to the core.

 

CCC, as its name implies, Concatenates Compress and Caches., so? why webpack?

Webpack, more than CCC, provides a dependency tree.

 

What I see is 3 separated ways of handling JS in the demo (css is same, the story as started with sass/less in 1.6)

- one bundle for the core (jquery and some modules...) build with webpack

- one bundle for theme (bootsrap.js and some js...) build with another webpack conf.

- one bundle with all the rest (Ps modules, jquery.ui,  custom theme.js...)  optionaly build with CCC

 

I asked Why Webpack? I'm now asking :

 

How webpack can be used to bundle Prestshop's modules and themes with core to produce assets?

[hiousi]

I've wrote a webpack plugin that produce an assets.yml file.

you can use it for theme.yml in presta 1.7

the file looks like this:

js:
    main:
        -
            id: main
            path: style.js
            priority: 10
css:
    main:
        -
            id: main
            path: main.css
            priority: 10

This file helps my presta 1.6 to load all assets with a simple override of frontcontroller.

Presta 1.7 uses something similar for theme's assets.

 

The main difference from 1.7 current implentation is that I use webpack for all  the prestashop css and js, not only for my theme's assets. Wepback is also used to build the prestashop's core assets allowing me to use the js and the css frameworks of my choice, or what a dependency requires. I can play with the full power of webpack: modules, dependencies,  code splitting, transtyping, long term caching and webpack-dev-server with HMR

 

if someone is interested you can download the plugin there:

https://github.com/hiousi/page-assets-webpack-plugin

[geotargetplus]

Hi I have question.

 

I install webpack and compile all files. Hot to make some change in css style?

 

To do this i must go to /_dev/themes.scss and make some change next run npm run build or npm run watch or I can do it on assets/css/custom.css or is another way?

[gabdara]

If you want to heavily change the styles of the theme, then you should modify the .scss files and compile with npm run build or compile at each file save with npm run watch.

Otherwise if you only want to change little things here and there, use custom.css file.

[Sharak]

And what about sourcemaps? How to enable them for css?