Help using webpack

[Jose J. Fernández]

Hi there,

 

I am creating a theme for 1.7 based on the StarterTheme. I am replacing Stylus with Sass and implementing Bootstrap 3.x, and no problems so far, but things are different when laying my hands on Webpack.

 

I just have no idea. Ideally I would replace it with Grunt or Gulp, since I have experience with them and use them fine in other projects, but I guess that Webpack is being used to include default PrestaShop Javascript. Is this true? Can I just exclude Webpack from the party or am I being forced to use it?

 

Also, as a side note, I am not new to web development and project tooling in general. It's just Webpack that I don't know how to use.

 

Thanks!

[El Patron]

I've seen a lot of great information and sharing re 1.7 here:

 

https://gitter.im/PrestaShop/General

 

You might be able to get advice there as it's very active with actual PS Dev participation.....then if you would be so kind as to post any info/solution back here for others it would be much appreciated.

 

happy day, el

Edited June 21, 2016 by El Patron (see edit history)

[Jose J. Fernández]

Thanks for your response, I was not aware of that resource. That said, maybe there are too many places to talk about PrestaShop :|

[El Patron]

Thanks for your response, I was not aware of that resource. That said, maybe there are too many places to talk about PrestaShop :|

 

yes, the forum is difficult to get feel for what really happening by the shakers and movers.  at some point we need a little help from our friends.  as module dev I am aware of webpack and making notes of what little there has been published....but webpack as I understand it will allow implementation of one CCC .js/.css file for all pages.  This is a huge huge performance gain no matter what the http2 pundits say...lol  

 

Your research/advices to community will be 'very'  much appreciated for long time to come.

[Jose J. Fernández]

Thanks for your comments. I've been reading the docs and it looks like Webpack will be The Tool from now on, to be honest, but as you just said little has been published in the PrestaShop community about it.

 

Whatever I manage to find out will be published somewhere else, probably here. I still like forums better than IM. Maybe getting older or something.

[El Patron]

Maybe you have seen this, but I post for others as well

 

https://github.com/PrestaShop/docs/blob/master/themes/assets/assets.rst

 

Hopefully this will 'fix' so many of the bad .js implementations, i.e. clashes with other .js hooked out of header.  It's a mess now...

[Traumflug]

Documentation has certainly some valueable hints, but as far as my research goes, no complete set of instructions. I mean to see a tendency to describe a lot there, but always missing the most important bits. One has to know how the stuff works to be able to read the documentation. Or something like this ... :-)
 
Anyways. This is how I got webpack up to speed:

• Have Node.js and NPM installed. On Debian/Ubuntu that's
  

  sudo apt-get --no-install-recommends install nodejs npm
  

• In the Github repository you can find a number of files with the name package.json. Get the one in themes/classic/_dev and place it in the same location in your own installation.
• Note that all webpack development is for JavaScript and CSS and happens in this _dev directory. There should be no .scss files outside of _dev. Only .js files inside there should be edited. .css files shouldn't be edited at all. That said, HTML/templating stuff is not done with webpack, I'll come back to this later.
• Now you can install webpack:
  

  cd themes/classic/_dev
  npm install
  

  This will fetch a lot of stuff from the web, so it takes a while.
• At this point one has to deal with the fact that PrestaShop developers used slightly outdated packages to build the beta2 distribution. So one has to uninstall a couple of packages, just to re-install them with a slightly older version:
  

  npm uninstall jquery
  npm install [email protected]
  npm uninstall tether
  npm install [email protected]
  npm uninstall events
  npm install [email protected]
  npm uninstall flexibility
  npm install [email protected]
  

  Without doing this adjustment, dropdown menus stopped working for me.
• Now one can rebuild the theme as-is:
  

  rm -r ../assets/*
  npm run build
  

  Note how assets are removed before the build. This isn't crucial, but makes sure no unused files are left in place. All important files are overwritten on each build anyways.

At this point one should have the very same result as it came with the distribution minus two obsolete files, which is an excellent starting point. Time to fire up the favorite text editor and getting the new design into place. After each tiny change one has to do a full rebuild before one can see changes in the browser. Makefiles can do that better, but, heck, that's web development here :-)

 

Regarding HTML/templates: they have a build system, too. Actually, two of them. One is general compilation, which happens automatically on each page call in the browser. Make sure caching is turned off, of course.

 

The other part of the HTML build system is about general placement of modules. This placement is described in themes/classic/config/theme.yml. Editing that file has no effect ... until one goes to the admin panel, Menu -> Design -> Themes and clicks the Reset to default button there. Unfortunately I found no way so far to rebuild this part from the command line.

 

There are other package.json files besides the one in _dev. Not sure what they're good for. Maybe, webpack can be used in several places.

 

I hope this helps and I also hope I didn't miss some crucial parts either :-)

Edited July 30, 2016 by Traumflug (see edit history)

[Julien Bourdeau]

If you're intrested, I've reworked the webpack.config.js for StarterTheme:

https://github.com/PrestaShop/StarterTheme/blob/master/_dev/webpack.config.js

 

Sass will now work out of the box (along with less, stylus and plain css).

[Traumflug]

@Julien Bourdeau, could you make sure this package.json file becomes part of the distribution? Only a few hundred bytes additional distribution file size, still a lot of gain for theme developer newbies.

 

Another wish is to record the exact package versions in this file. For example, jQuery is recorded as '^2.1.4' and simply installing this currently gives jQuery 3.1.0, which broke submenus rolling down here. Replacing that with '2.2.4', without '^', would give the working jQuery 2.2.4 without extra steps and extra investigations (see post above).

[Julien Bourdeau]

Dependency versions will be fixed before final release.

 

We talked about the final zip package, we don't know yet if sass and dev tools will ship with the "production version" since it's available on GitHub. Although nothing has been decided yet.

[Traumflug]

I agree, having all source files in the end user distribution is a bit a waste. On the other hand, copying the development bits out of the Git repo is a bit complicated, definitely more than a simple copy operation.

 

How about making a second zip package with all the developer files? Developers would unpack the production package first, then the developer package on top of this.

 

That said, I'm very happy to see PrestaShop (web developers in general) starting to use compilers and build mechanisms. One day perhaps even a PHP compiler :-)

[Traumflug]

Update for 1.7.0.0-rc0 and September 2016. Theme build goes like above, just the set of manual package version adjustments has changed.

 

Instead of the four adjustments listed above there are left only two to build the theme identical to the distribution:

npm uninstall bootstrap
npm install [email protected]
npm uninstall tether
npm install [email protected]

 

[Traumflug]

New releases (1.7.0.0-RC1 and some NPM packages), new adjustments :-)

 

Bad news: doing a theme re-build as shown above fails now with this error:

ERROR in ENOENT: no such file or directory, scandir '/path/to/shop/themes/classic/_dev/node_modules/node-sass/vendor'

This can be fixed by doing this after the 'npm install':

npm uninstall node-sass
npm install [email protected]

Good news: that's it, all other replacements are obsolete now.

[Traumflug]

 

npm install sass-loader node-sass webpack --save-dev (installed all module in file package.json width: npm install)

 

Do just a 'npm install', no module names after that. Then the pair of commands I mentioned in my previous post. If there is no package.json file, get it from here: https://github.com/PrestaShop/PrestaShop/tree/1.7.0.0-rc.1.0/themes/classic/_dev (PrestaShop Github repo, tag '1.7.0.0-rc.1.0').

Edited September 27, 2016 by Traumflug (see edit history)

[Traumflug]

It looks like the theme coming with 1.7.0.0 final can no longer be re-built as-is. This used to work fine for all the beta and rc releases.

 

Evidence of that is, assets/theme.css was built with [email protected], while assets/theme.js was built with [email protected]. One developer can't use both versions at the same time: packagers mixed files from different builds.

 

Aside from that, a theme built from unchanged sources has some 50 to 100 lines, outside of the bootstrap stuff, different from the one coming with the distribution.

 

Well, let's cross fingers the shop works with such a rebuilt theme. That's crucial for theme development.

 

An attempt to build with bootstrap...alpha.2 fails with code errors. With ...alpha.3 the build at least completes.

 

'npm install' overrides to get as close to the released files as possible:

  npm uninstall bootstrap
  npm install [email protected]
  npm uninstall tether
  npm install [email protected]
  npm uninstall velocity-animate
  npm install [email protected]

[roo10]

I have added Roboto font using webpack but it shows error.

ERROR in ./~/css-loader?sourceMap!./~/postcss-loader!./~/sass-loader?sourceMap!./css/theme.scss
Module not found: Error: Cannot resolve 'file' or 'directory' ../../../fonts/Roboto/Roboto-Regular.eot in F:\wamp\www\ps17\themes\mytheme\_dev\css
 @ ./~/css-loader?sourceMap!./~/postcss-loader!./~/sass-loader?sourceMap!./css/theme.scss 6:119655-119706 6:119783-119834 6:120338-120389 6:120466-120517

Edited November 26, 2016 by roo10 (see edit history)

[MrC8]

Hello,

Well this 1.7 webpack system is really hard to understand (my opinion, compass was simpler ).

I spend many times to get my sass files compiled and I finaly found how to...

 

You have to :

npm unsinstall node-sass
npm install [email protected]
npm-install open-sans-fontface
npm-uninstall material-design-icons
npm install material-design-icons

In my opinion don't use the classic theme from github. I download the prestashop 1.7.3 from website and extract the _dev folder of the classic theme. This one works for me.

 

Now when I do "npm run build" the compilation works but I don't knwo why, "npm run watch" don't "watch" anything... It does the same thing that "build"... it never detect that a file is changed...

 

Any help for this ?

Edited January 10, 2017 by MrC8 (see edit history)

[Traumflug]

Any help for this ?

 

Forget this "watch" thing. Nice idea, but not really helpful in practice. Compilations take several seconds (15 to 17 on my shabby box), so you always have to remember to wait before reloading in the browser anyways.

[MrC8]

Forget this "watch" thing. Nice idea, but not really helpful in practice. Compilations take several seconds (15 to 17 on my shabby box), so you always have to remember to wait before reloading in the browser anyways.

 

You right, the compilation is really really slow... not really easy when you want to change the classic theme...

Do you know if it can be possible to compress only css when the build task is done ? and not js + css all times. It should be faster.

[Traumflug]

You right, the compilation is really really slow... not really easy when you want to change the classic theme...

Do you know if it can be possible to compress only css when the build task is done ? and not js + css all times. It should be faster.

 

I wish I knew a way to compile CSS only. Searched for one, but didn't find one so far.

 

One obvious strategy is to experiment in Firefox' web developer tools, of course. This magnificent tool even recognizes which line of CSS was written in what SCSS file.

[gabba]

doing the same as you guys with this as the_dev theme seems like the only logical way of building a new theme from the basics at the moment, I guess modifying the webpack.config.js file would enable you to limit the webpack build to only process the css or other files, but at the moment what ever i try with that file either errors or limits it to js only files, as is the build is taking 30 seconds or more each time..

[rtvt]

So I need to use gulp instead of webpack to work with browsersync? I have 12 seconds build time with webpack. Is there a way to go with 1 second for example?

[SmartDataSoft]

hi any one can help on this issue , when someone run 

$ npm install

npm WARN deprecated [email protected]: