Hi,
very nice work!
Everything works perfectly except I am having issues with importing jQuery dependencies like masonry…
In sage 8 I added them in bower and they were included and compiled in main.js,
In sage 9 I added masonry in package.json like this :
Thanks for answer,
the only way I found to make it works is to use import with path import 'masonry-layout/dist/masonry.pkgd.js'; import 'jquery-bridget/jquery-bridget.js'; import 'imagesloaded/imagesloaded.pkgd.js';
I had issue when using : import Masonry from 'masonry-layout'; import jQueryBridget from 'jquery-bridget';
I get a Uncaught TypeError: (0 , _jqueryBridget2.default) is not a function error … even if webpack compiles successfully.
It seems to be the same for all dependencies added in node package,
I need to import 'path/file.js'; in main.js
Or instead of tweaking webpack.config.js, you could do it this way:
import Masonry from 'imports?define=>false&this=>window!masonry-layout';
import jQueryBridget from 'imports?define=>false&this=>window!jquery-bridget';
import imagesLoaded from 'imagesloaded';
Thanks !
I really have to learn more about webpack config … it seems to be more and more used.
Can you explain the difference between this way and the way bootstrap js files are imported with import + full path ? import 'bootstrap/dist/js/.../....js';
I’m trying to get my head around the whole new Webpack configuration and I’m starting to see the advantages of this module based approach.
I’m far from understanding everything yet, but I thought the biggest advantage of Webpack would be splitting up your javascript in view/page specific chunks (like described here in 3. “entry” — String Vs Array Vs Object).
Right now Sage 9 is still using a single main.js file with the DOM-based routing. Is this done deliberately because you think the advantages of separate chunks don’t weigh up to the disadvantages of enqueuing multiple js files? Or is it up to you to add entry points in config.json and enqueue them in your templates yourself?
Furthermore, is it correct behaviour that running npm run watch deletes the dist folder and results in a 404 on the CSS: https://localhost:3000/app/themes/sage-9/dist/styles/main.css Failed to load
Thanks for all your hard work on sage 9, looking forward working with it!
One of the advantages of using webpack is that you can require the other bundles dinamically via ajax with require.ensure() from your main entry point. This means you can leverage the dom-based routing and still achieve multiple bundles that will only be loaded when the page requires it.
And yes, npm run watch serves all your assets from the development-server built in webpack.
var Sage = {
// All pages
'common': {
init: function() {
// JavaScript to be fired on all pages
require.ensure(['./views/Common.js'], function(require) {
require('./views/Common.js');
});
},
finalize: function() {
// JavaScript to be fired on all pages, after page specific JS is fired
}
},
// Home page
'home': {
init: function() {
// JavaScript to be fired on the home page
require.ensure(['./views/Home.js'], function(require) {
require('./views/Home.js');
});
},
finalize: function() {
// JavaScript to be fired on the home page, after the init JS
}
},
// About us page, note the change from about-us to about_us.
'about_us': {
init: function() {
// JavaScript to be fired on the about us page
require.ensure(['./views/AboutUs.js'], function(require) {
require('./views/AboutUs.js');
});
}
}
};
Which results in this file output when running npm run build:
No problem. I can confirm that it does work correctly!
When running npm run build only main.js is enqueued and in my example common.js (2.js) gets loaded on every page. On the homepage common.js (2.js) & home.js (3.js) are loaded and on the about us page, common.js (2.js) & about.js (4.js) are loaded.
When running npm run build:production the chunks are loaded correctly too, even with hashed filenames!
The only problems I’m having is when running the watch command npm run watch:
Mixed Content: The page at 'https://localhost:3000/' was loaded over HTTPS, but requested an insecure script 'http://localhost:3000/app/themes/sage-9/dist/2.scripts/2.js'. This request has been blocked; the content must be served over HTTPS.
The required chunks from the main.js are blocked.
I have setup my WP site with Trellis with SSL enabled:
ssl:
enabled: true
provider: self-signed
Also I’m wundering if we could maintain just 1 dist/scripts folder instead of a separate folder for each required chunk (dist/2.scripts, dist/3.scripts, dist/4.scripts etc)?
Hi Guys I’ve got a odd thing happening with Webpack and I hope that someone can help?
I’ve been working fine on a project without issue, but now when I run ‘npm run watch’ it runs and the page loads, but with no css or js being sent to the page, so I’m left with just html.
I’ve not changed anything in the config files. It’s very odd
