How can I set up ThemeKit with Webpack 4 and Liquid Loader?

Store Design
1

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
2

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.

1 Like
3

Thanks @ahenriksen ,

I have found the hayes0724/shopify-webpack-themekit & krjo/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?

2 Likes
4

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.

5

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
6

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

7

Try this one: https://github.com/the-utd/Themeplify

8

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?

9

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