I used to have a folder structure like this:
[development]
--[app]
----[dist]
------[js]
--------app.js
--------contact-support.0.js
----[src]
--[node_modules]
--package.json
--webpack.config.js
--index.php
[tools]
but moved everything related to webpack from root directory to tools/webpack
:
[development]
--[app]
----[dist]
------[js]
--------app.js
--------contact-support.0.js
----[src]
--index.php
[tools]
--[webpack]
----[node_modules]
----package.json
----webpack.config.js
So I run webpack now from tools/webpack
and most of paths in webpack.config.js
are preceeded by ./../../development
.
And everything works, apart from those dang chunks (created by require.ensure()
).
I have no errors on webpack compile and no errors in Chrome's console, but when I stumble on part of code that dynamically loads a chunk I get:
Uncaught (in promise) TypeError: Cannot read property 'call' of undefined(…)
I know it doesn't tell much, but from my experience for 99% it has to be related to webpack's path handling.
The devil is hidden here:
output: {
chunkFilename: './../../development' + '/app/dist/js/[name].[id].js',
publicPath: 'http://localhost/YDR/branches/refactoring/tools/webpack/'
},
The problem is that when webpack generates the chunk file it is done in different directory (./tools/webpack/
) than when app tries to load it (./development/
), so I cannot use relative paths and need be little hacky here.
Theoretically these paths are correct:
on save: the path in which the chunk file is saved is the path from where I'm running webpack (
tools/webpack
which is same as publicPath), but elevated 2 levels up tohttp://localhost/YDR/branches/refactoring/development/app/dist/js/
on load: the path from which I load the chunk file is generated from publicPath + chunkFilename which also resolves to
http://localhost/YDR/branches/refactoring/development/app/dist/js/
However, it still breaks when I reach:
module.exports = (function () {
$('document').ready(function () {
$('body').on('click', '[data-target="#contactSupport"]', function () {
require.ensure([
'./../modules/contact-support/contact-support.js' // files that chunk will contain
], (require) => {
require('./../modules/contact-support/contact-support.js'); // BREAKS HERE
}, 'contact-support'); // name of chunk file
});
});
})();