ThemeKit, Webpack and Liquid Loader?

cdnmikes
Excursionist
23 0 15

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.

Replies 8 (8)

ahenriksen
Visitor
2 0 1

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
23 0 15

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?

ahenriksen
Visitor
2 0 1

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
cdnmikes
Excursionist
23 0 15

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
23 0 15

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

bryanDev
Shopify Partner
1 0 0

Hello, 

 

I've been scouring the internet to find a way to configure Webpack or Gulp to compile javascript with liquid tags in them, and landed here. Great repo btw! I'm looking around, but were you able to compile and minify .js.liquid type files? 

George-S
Shopify Partner
11 0 19

sebastiangon11
Visitor
1 0 0

Would this https://github.com/azeeson/liquid-loader/pull/3 have been helpful to consider liquid-loader ?