I am currently using Django in conjunction with Webpack and Vue, as well as implementing Code splitting within Webpack. The issue I am facing is that Webpack splits chunk files from the source code of .vue files, but I am unable to load these chunk files in the web browser due to incorrect URLs within my project structure. I am looking for a way to change the load URL of these chunk files, however, I am unsure how to proceed. How can I modify the load URL of the chunk files?
Upon checking the Chrome console, I encountered the following error logs:
GET http://localhost:8123/mycomponent.chunk.js 404 (Not Found)
main.js:12 Error: Loading chunk 2 failed.
(error: http://localhost:8123/mycomponent.chunk.js)
at HTMLScriptElement.a (main.js:1)
The desired URL format for the chunk file should be '/static/js/mycomponent.chunk.js'.
Here is a snippet from my webpack.config.js file:
const path = require("path")
const webpack = require('webpack')
const BundleTracker = require('webpack-bundle-tracker')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
context: __dirname,
entry: './src/main.js',
output: {
path: path.resolve('../static/js/'),
filename: "[name].js",
chunkFilename: '[name].chunk.js',
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
],
},
plugins: [
new BundleTracker({filename: './webpack-stats.json'}),
new VueLoaderPlugin(),
],
resolve: {
alias: {
'vue': path.resolve('./node_modules/vue/dist/vue.js'),
}
},
}