Is it possible to expose various parts of the webpack config?

[dan-gamble]

Problem

Currently the build system is opinionated (which isn't a bad thing). But it would be nice to be able to add our own loaders / plugins / potentially use a PostCSS style system instead of SASS if the user desires;

More Information

Any additional information which might be helpful.

I know Blendid is run on Gulp where as i believe Slate is now all on webpack they achieve it with a API / config like: https://github.com/vigetlabs/blendid/wiki/Configuration#alternatetask which is quite elegant.

I don't know too much about Shopify but i'd happily start looking in to this if this was something you guys are open to 👍

[t-kelly]

Hey Dan -- still mulling over how I want to structure slate.config.js and how to expose the webpack.config.js for overwriting/expansion. I'm liking how Gatsby uses a list of plugins with the option of adding your own... Not sure how that would integrate with Webpack.

Right now, I have a basic key:value override setup for slate.config.js. Very basic. Still working on adding configurable options across the toolkit.

One thing I do feel strongly about is that whatever config we expose needs to be simplified. I don't want to ship a config setup that just adds another layer of complexity on top of the already complex webpack.config.js

Open for suggestions! Would love some ideas.

[rg-najera]

IMHO, I like the way Rails Webpacker does this. It allows us to extend the configs and append a plugin to an environment object. Exposing an object for OOP and allowing the user to make choices based on some initial guides could allow for a more advanced setup, while allowing a soft landing for those who opt not to use it. Seems to be some of the initial intention with the way slate.config is setup.

With webpacker, one of my goals was to be able to use sourcemaps for styles while keeping HMR in tact. We worked at adding https://github.com/sheerun/extracted-loader - which exposed the ability, and simply adding our new loader, and appending it to the environment object worked nicely.

Might allow for some inspiration here https://github.com/rails/webpacker/blob/master/docs/webpack.md#loaders

Is there no way to add a loader currently in 1.x ? I do see how the team is adding userWebpackConfig, in https://github.com/Shopify/slate/blob/1.x/packages/slate-tools/tools/webpack/config/dev.js#L80 but I'm not sure its doing what I think it does.

The current logic to me seems to say that I can add properties like module plugins to dev in extends on slate.config.js - and it would all just be merged. Maybe adding some clarification on how you expect this to work would expose more ideas / contributions.

Last but not least, I would expect slate.config to error out at some point. Requiring non existent libraries to the config here doesn't break the compiling task like it would when working with webpack. Was that the intended behavior?

[t-kelly]

Is there no way to add a loader currently in 1.x ? I do see how the team is adding userWebpackConfig, in https://github.com/Shopify/slate/blob/1.x/packages/slate-tools/tools/webpack/config/dev.js#L80 but I'm not sure its doing what I think it does.

@el-rotny so I was keeping this low-key but it looks like you stumbled upon an existing solution that I wasn't 100% sure on so I didn't include it in the docs yet.

It is currently possible to extend the Webpack configs through two parameters in slate.config.js:

'slate-tools': {
  extends: {
    dev: { ... **insert config object here** ... },
    prod: { ... **insert config object here** ... },
  },
}

We're using Webpack Merge to make this possible.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.