ThemeKit, Webpack and Liquid Loader?

Highlighted
Excursionist
15 0 4

Has anyone setup ThemeKit with Webpack 4?

I am looking for a way to compile .liquid files with some of the following:

  • Minify liquid code, remove whitespaces & comments
  • Use wildcard directories for example './src/components/**/*.liquid’

Has anyone done this or have any suggestions on webpack plugins & configuration?

I have tried liquid-loader but was unsuccessful in setting it up.

html-minifier-webpack-plugin looks promising but again I was not able to have it parse .liquid files.

Any help or github examples would be awesome.

1 Like
Highlighted

Take a look at https://github.com/hayes0724/shopify-webpack-themekit. This is currently what I'm setting up as well and have found a lot of good code in that repo.

Adam
1 Like
Highlighted
Excursionist
15 0 4

Thanks @ahenriksen,

I have found the hayes0724/shopify-webpack-themekitkrjo/shopify-webpack-dev-workflow helpful in setting things up.

I know we can keep liquid free of whitespace if we use {{-, -}}, {%-, and -%} with hyphens but what about the html.

Any way to minify or do some cool things there for the compiled html in liquid files?

1 Like
Highlighted

I'm not sure of a way to minify or do any additional processing as I'm pretty new to Shopify development and am still working out all the ins and outs of Liquid and the Shopify environment. If you come up with something, I'd love to hear about it.

Adam
0 Likes
Highlighted
Excursionist
15 0 4

I'll be sure to update anything I find here. Typically, I usually learn that if it's not done already there is usually a good reason why haha.

1 Like