ThemeKit, Webpack and Liquid Loader?

cdnmikes
Excursionist
21 0 7

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.

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
cdnmikes
Excursionist
21 0 7

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?

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
cdnmikes
Excursionist
21 0 7

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.

cdnmikes
Excursionist
21 0 7

Still haven't found a way to load liquid and minify but I have some ideas. Here is the project wip: https://github.com/3daddict/themekit-webpack

0 Likes
George-S
Shopify Partner
10 0 19