Django + Webpack + Vue + Code splitting - 如何更改块文件的负载 url

Question

我正在将 Django 与 Webpack 和 Vue 一起使用，并在 Webpack 中进行代码拆分。 Webpack 从 .vue 文件的源代码中拆分块文件。但是，我无法在 Web 浏览器上加载块文件，因为 url 在我的项目结构中不正确。我想更改块文件的负载 url，但我不知道这些。如何更改块文件的负载 url？

Chrome 控制台日志：

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)

我需要“/static/js/mycomponent”的 url 个。chunk.js”。

webpack.config.js:

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'),
    }
},
}

Answer 1

尝试在输出中添加 publicPath: '/static/js/'。

此外，如果您从 Django 模板页面提供 js，您可以使用 django-webpack-loader，它简化了提供 js 文件并支持热模块重新加载。

Django + Webpack + Vue + Code splitting - 如何更改块文件的负载 url

Django + Webpack + Vue + Code splitting - How to change load url of chunk files

javascript

django

webpack

vue.js

code-splitting