Sage 9 + webpack

sage
21

@joaovpmamede Using npm run build:production worked for me.

22

Could you explain a bit better?
Did you had to import or require the images in main.js?
What about during development? How do you use them?
Because everytime you run npm run watch the dist folder is “recreated”.

Edit:
Okay nevermind, I was doing something wrong.
I finally got it working, just need to figure how to “move” the images to their folder, e.g. assets/images/foo/bar.png to dist/images/foo/bar.png

23

This is not figured out yet with the current setup. This will most likely have to be separate from webpack.

24

Yup, currently I’m having some issues with svgs.
Can’t inline them.

I guess I’ll have to go back to Sage 8.x.

25

I just sent a PR (already merged!) to roots/sage sage-9 branch. The assets images and fonts will keep the same subfolder structure. It works fine with me when I import them in my main.js.

main.js :
import "../images/foo/bar.png";

when running npm run build
assets/images/foo/bar.png -> dist/images/foo/bar.png

I hope that works for you.

The settings that makes it work is in webpack.config.js. The file loader needs a context= assets/ and then we can use [path][name].[ext] to respect the folder tree.

1 Like
26

@patrickv Hi, I’ve just updated my version of sage to be inline with your contributions, but now if I run watch the site loads with no css and js. But is I run build it works fine as the dist/ directory is created and used.

Any ideas why this might be?

Thanks

27

It’s because in watch mode, the assets (css/js) are not stored on the hard drive but served by webpack. Normally you can access you site at the browser-sync address localhost:3000.

28

Hi,

Sorry, I was not clear. I get the build process produces those in the dist and that watch doesn’t, but the watch doesn’t load any css/js when viewed at http://localhost:3000/my-site it’s like webpack isn’t loading

29

Have you edited the assets/config.json? output > publicPath and devUrl should be set to your theme folder and dev server.

30

I’ve just changed the public path as I think that might be set up for Trellis? I’ve just got it working in the ‘traditional’ setup. But this hasn’t helped.

{
  "context": "assets",
  "entry": {
    "main": [
      "./scripts/main.js",
      "./styles/main.scss"
    ],
    "customizer": [
      "./scripts/customizer.js"
    ]
  },
  "output": {
    "path": "dist",
    "publicPath": "/wp-content/themes/starter-2016/dist/"
  },
  "devUrl": "http://localhost/Starter-Website/",
  "devPort": 3000
}
31

You could try "publicPath": "/Starter-Website/wp-content/themes/starter-2016/dist/". The watch script (watch.js) is probably setting the publicPath to http://localhost:3000/wp-content/themes/starter-2016/dist/ and your files are at http://localhost:3000/Starter-Website/wp-content/themes/starter-2016/dist/

32

YES! That’s it.

Thank you.

1 Like
33

I have another question ( sorry & it’s open to anyone here and not directly aimed at @patrickv ), in the main.js file could you load up admin only js?

Like this …

'wp-admin': {
		init: function() {
			alert();
		},
		finalize: function() {
			// NOTE:
			// JavaScript to be fired on the home page, after the init JS
		}
	},

and have webpack ‘watch’ it also?

34

I think I would add en enrty to assets/config.json.

{
“context”: “assets”,
“entry”: {
“main”: [
“./scripts/main.js”,
“./styles/main.scss”
],
“customizer”: [
“./scripts/customizer.js”
],
“admin”: [
“./scripts/admin.js”,
“./styles/admin.scss”
]
…

Then, in src/admin.php, I would enqueue both scripts and styles with the admin_enqueue_scripts.

add_action(‘admin_enqueue_scripts’, function () {
wp_enqueue_style(‘sage/admin.css’, asset_path(‘styles/admin.css’), false, null);
wp_enqueue_script(‘sage/admin.js’, asset_path(‘scripts/admin.js’), [‘jquery’], null, true);
}, 100);

CSS is inlined with the JavaScript in ‘watch’, so you kind of need to load both js/css if you want to load styles.

I hope it helps! Maybe someone else would have a better way, but that seems to work well for me.

35

Any ideas on how to ignore third party scripts from being processed on build/watch ? I keep getting eslint errors.

I added this in config.json

"iconic.min": [
      "./vendor/iconic/js/iconic.min.js"
]

And enqueue’d the file in setup.php

wp_enqueue_script('wplynx/iconic.min.js', asset_path('vendor/iconic/js/iconic.min.js'), null, null, true);

36

So to be clear, Sage 9 currently doesn’t move (or optimize in the case of fonts) fonts or images to the dist folder?

37

Not yet. This is probably going to be handled separately from Webpack.

38

https://webpack.github.io/docs/configuration.html#module-loaders

You can “exclude” the vendor dir from the .js loader

39

@austin, am I reading that correct? You’re planning to not handle images and fonts with Webpack?

40

The current version of sage-9 optimize images with image-webpack-loader and copy fonts to dist/fonts folder.

https://github.com/roots/sage/blob/sage-9/webpack.config.js#L121-156