Invalid relative path concatenation in get_chunk_url #207
Description
Context:
I am using django-webpack-loader in a multi-pages Django app that runs VueJS components in Django templates. I set the publicPath option in webpack to an empty string so that I can control the static url from the Django settings and properly use a CDN server, as described in #160
Issue:
JS and CSS assets are saved to css and js subfolders. Here is what webpack-stats.json looks like:
"status": "done", "chunks": { "compA": [{ "name": "css/compA.css", "path": "D:\\home\\site\\wwwroot\\common-static\\assets\\frontend\\css\\compA.css" }, { "name": "css/compA.3564e3ce75ddc57936fd.css", "path": "D:\\home\\site\\wwwroot\\common-static\\assets\\frontend\\css\\compA.3564e3ce75ddc57936fd.css" }, ... }], ... } Note that the chunk name uses a UNIX-like path "css/compA.css".
In settings.py I have the following configuration:
WEBPACK_LOADER = { 'DEFAULT': { # when true, webpack will read stats file only once and cache results 'CACHE': not DEBUG, # dir in which webpack outputs the bundles - it should not be full path 'BUNDLE_DIR_NAME': os.path.join("assets", "frontend", ""), # add a trailing slash # location of the bundle tracker file 'STATS_FILE': STATS_FILE, 'POLL_INTERVAL': 0.3, 'TIMEOUT': None, 'IGNORE': [r'.+\.hot-update.js', r'.+\.map'] } } The BUNDLE_DIR_NAME value ends up being 'assets\frontend\' on Windows.
With these settings, django-webpack-loader prints an invalid path in the Django template by concatenating BUNDLE_DIR_NAME with the chunk name: \static\assets\frontend\css/compA.css
The issue is in the get_chunk_url of webpack_loader/loader.py:
def get_chunk_url(self, chunk): public_path = chunk.get('publicPath') if public_path: return public_path relpath = '{0}{1}'.format( self.config['BUNDLE_DIR_NAME'], chunk['name'] ) return staticfiles_storage.url(relpath) Concatenation does not take into account that the two relative paths may be formatted differently. In addition it requires the BUNDLE_DIR_NAME settings to end with a slash.
Solution
This issue is easily fixed by replacing the path concatenation with:
def get_chunk_url(self, chunk): public_path = chunk.get('publicPath') if public_path: return public_path relpath = os.path.normpath( os.path.join(self.config['BUNDLE_DIR_NAME'], chunk['name'] ) return staticfiles_storage.url(relpath) This makes the path concatenation OS-independent, and allow greater flexibility to define output paths in the webpack config.