Django + Webpack + Vue + 代码拆分 - 如何更改块文件的加载 url答案

【问题标题】：Django + Webpack + Vue + Code splitting - How to change load url of chunk filesDjango + Webpack + Vue + 代码拆分 - 如何更改块文件的加载 url
【发布时间】：2019-01-17 15:00:31
【问题描述】：

我正在使用带有 Webpack 和 Vue 的 Django，以及 Webpack 中的代码拆分。 Webpack 从 .vue 文件的源代码中拆分块文件。但是，我无法在 Web 浏览器上加载块文件，因为 url 在我的项目结构中不正确。我想更改块文件的加载 url，但我不知道这些。如何改变chunk文件的加载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.chunk.js' 的 url。

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

【问题讨论】：

标签： javascript django webpack vue.js code-splitting

【解决方案1】：

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

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

【讨论】：