Foundation-sites: build: full move to webpack (4)

[DanielRuf]

I started working on moving the templates to a webpack 4 based configuration which is much faster than the Gulp setup.

• [ ] migrate Gulp tasks to npm scripts
• [ ] finish webpack 4 config
• [ ] remove obsolete dependencies

[DanielRuf]

@hal869 do you want to share your config and issues that you faced so we can address them?

[DanielRuf]

Will take the time to finish the webpack 4 setup for the templates.
After this we can migrate Foundation itself from Gulp to pure weback based builds.

[arxpoetica]

You guys should really consider moving to Rollup. https://rollupjs.org/guide/en

[DanielRuf]

Rollup is another (new) bundler and has its own problems. I'm aware of Rollup but would not recommend it.

[DaSchTour]

There is a fundamental difference between webpack and rollup. Rollup is optimized for bundling ES modules. Webpack is does es bundling (maybe not that good as rollup does) but it also does a lot more. So when looking on the usage of rollup you find it in JS only libraries, framework and tools. So rollup is not a replacement for gulp or webpack.

[DanielRuf]

Webpack is does es bundling (maybe not that good as rollup does) but it also does a lot more.

Definitely. We have all the plugins there and there is a big ecosystem for webpack that we still need.

[DanielRuf]

So when looking on the usage of rollup you find it in JS only libraries, framework and tools. So rollup is not a replacement for gulp or webpack.

Exactly, it is just meant for pure ES(6) libs. Not for (most) frameworks.

[arxpoetica]

I won't be too troublesome, but having used both, Rollup is simply amazing (and amazingly simple). One can actually use both. You can still do everything else you need with WebPack, but just do the actual JavaScript compiling with Rollup. Still use WebPack for asset pipelines, CSS/(node-)SASS bundling, etc., etc. Rollup will even do codesplitting if you need.

[DaSchTour]

So we remove gulp to only have webpack and add rollup just to be amazing? What's the benefit?

[DanielRuf]

Rollup will even do codesplitting if you need.

Thta's what webpack already does for a long time now =)

[DanielRuf]

So we remove gulp to only have webpack and add rollup just to be amazing? What's the benefit?

I see no real benefit in it. Just the move to a single and full webpack build makes sense in my opinion.

[glennphilp]

Is this going to be Foundation for Sites v6 or are you talking about creating a completely separate repo for webpack build?

[DanielRuf]

@glennphilp I'm speaking about the build of Foundation which is in this repo and also part of the templates.

6.5 will probably internally use webpack 4 through Gulp. It is planned to replace Gulp in the future and use pure npm scripts + webpack.

[phifa]

What is the current state of this?

[DanielRuf]

6.5 will probably internally use webpack 4 through Gulp.

Should be already the case.

[phifa]

• [ ] migrate Gulp tasks to npm scripts

What are your current thoughts on this? is gulp still valuable or is it better to simplify things and move everything to webpack?

[DanielRuf]

My thoughts: move away from gulp and use pure npm scripts.

[phifa]

What about performance? My biggest issue with is foundation build time. If we can go faster without gulp, I am all for it.

[DanielRuf]

As already written in https://github.com/zurb/foundation-sites/issues/10811

Yes it is faster. Gulp uses a wrapper and loads the config with webpack-stream and uses webpack through at least 2 more layers.

[DanielRuf]

Gulp plugins always add overhead + Gulp itself.

[SassNinja]

@DanielRuf what's the status of this issue? is it still relevant or shall we postpone it to v7?

I wasn't able to find a PR referencing it.
Just let me know if you need any help (I'm quite familiar with webpack)

[DanielRuf]

@SassNinja I would say let's postpone it to v7 as this is an epic (npm scripts, configs, dependencies, docs, ...).

[HansUXdev]

Why webpack and not parcel? Its less configuration, less confusing and arguably faster.
Also if we are moving away from gulp (which i fully support) will there be an html loader?

[DanielRuf]

Why webpack and not parcel? Its less configuration, less confusing and arguably faster.

Because we already use webpack and we have much experience with it.
I see no reason to use another solution.

Also if we are moving away from gulp (which i fully support) will there be an html loader?

The gulp setup already uses webpack. There is a html-loader plugin by webpack which is widely used.

[SassNinja]

Why webpack and not parcel? Its less configuration, less confusing and arguably faster.

For small projects parcel is fine. But for large & complex projects I'd never use it because webpack is much more flexible and offers more plugins.

Less configuration and "less confusing" (what is probably related to the dev's experience) is not relevant for us because some of us are quite familiar with webpack and once it's set up, contributors mostly won't need to care about it at all as it's just working.

Furthermore (as @DanielRuf already pointed out) webpack is already part of the gulp setup.

[yangm97]

@DanielRuf was this issue replaced by something else?

[DanielRuf]

added the Revisit for F7 label 1 hour ago

This is planned for v7 as we are currently working on the last release for v6.

[Grawl]

there is webpack 5 released