webpack-bundle-tracker 没有创建 webpack-stats.json？答案

【问题标题】：webpack-bundle-tracker not creating webpack-stats.json?webpack-bundle-tracker 没有创建 webpack-stats.json？
【发布时间】：2020-10-14 02:00:17
【问题描述】：

我正在尝试将 Vue 和 Django 一起使用，如 this article 中所述。除了 webpack-bundle-tracker 之外，一切似乎都在工作。我很确定 webpack-bundle-tracker 甚至没有安装，因为当我运行 yarn add webpack-bundle-tracker --dev 时会发生这种情况：

yarn add v1.22.4
info No lockfile found.
[1/4] ????  Resolving packages...
error An unexpected error occurred: "https://registry.yarnpkg.com/core-js: self signed certificate in certificate chain".

但是，当我运行 npm install --save-dev webpack-bundle-tracker 时，它似乎可以工作？但没有真正改变，也没有生成 webpack-stats.json 文件。

另一件事可能是 django-webpack-loader，因为当我运行 pip install django-webpack-loader 时会发出一堆权限错误，但当我运行 pip install django-webpack-loader --trusted-host pypi.python.org --trusted-host files.pythonhosted.org --trusted-host pypi.org 时它起作用了。

当我尝试打开我的 vue/django 测试页面时，django 给我的错误：

Error reading /Users/$ME/Dev/digiproj/vue_frontend/webpack-stats.json. Are you sure webpack has generated the file and the path is correct?

只是不确定从这里去哪里，非常感谢任何帮助。

【问题讨论】：

标签： python node.js django vue.js webpack

【解决方案1】：

我也遇到了同样的问题，使用 django-webpack-loader 运行 Django，我还发现 webpack-stats.json 文件没有生成。我通过将 webpack-bundle-tracker 降级到 0.4.3 来修复它。我不确定为什么这个包的最新版本不起作用。

【讨论】：

哥们你真棒！几天来我一直在尝试解决这个问题，现在终于奏效了 - 非常感谢！

【解决方案2】：

我做了一些更改并将 webpack-bundle-tracker 从 alpha 降级到 0.4.3 你可以在这里找到webpack-bundle-tracker

或使用 npm i webpack-bundle-tracker@0.4.3

安装

在前端创建 vue.config.js 文件。

const BundleTracker = require('webpack-bundle-tracker');

module.exports = {
    publicPath: "http://0.0.0.0:8080",
    // output dir default buldle file ocation in dist
    outputDir: "./dist/",

    chainWebpack: config => {
        config.optimization.splitChunks(false)

        config.plugin('BundleTracker').use(BundleTracker, [
            {
                // filename: './webpack-stats.json'
                filename: './webpack-stats.json'
            }
        ])

        config.resolve.alias.set('__STATIC__', 'static')

        config.devServer
            .public('http://0.0.0.0:8080')
            .host('0.0.0.0')
            .port(8080)
            .hotOnly(true)
            .watchOptions({poll: 1000})
            .https(false)
            .headers({'Access-Control-Allow-Origin': ['\*']})
    }
};

在 django settings.py 文件中

INSTALLED_APPS = [
    'webpack_loader',
]

在settings.py文件底部添加这些配置

WEBPACK_LOADER = {
    'DEFAULT': {
        'CACHE': not DEBUG,
        'BUNDLE_DIR_NAME': 'webpack_bundles/', # must end with slash
        'STATS_FILE': str(BASE_DIR.joinpath('frontend', 'webpack-stats.json')),
        'POLL_INTERVAL': 0.1,
        'TIMEOUT': None,
        'IGNORE': [r'.+\.hot-update.js', r'.+\.map'],        
    }
}

而 index.html 看起来是这样的，

{% load render_bundle from webpack_loader %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>Django Vue-3X iNTEGRATION</title>
</head>
<body>
    <h1>HELLO FROM DJANGO</h1>

    <div id="app">
        <h1>HELLO FROM Vue</h1>
    </div>

    {% render_bundle 'app' %}
</body>
</html>

这些解决了我的问题。我还需要帮助使用最新版本的 webpack-bundle-tracker 和 vueCli

【讨论】：