使用yarn 1.22.19 无法生成webpack-stats.json

问题遇到的现象和发生背景:

img

在./my_project 文件夹,执行 自定义命令 yarn build_development的时候,按照文档指示 https://arches.readthedocs.io/en/stable/installation/#build-a-frontend-asset-bundle 应当耗时1min左右在./my_project/webpack 文件夹下生成 webpack-stats.json文件,但是只是运行一两秒后就结束,且没有生成该文件也没有任何报错

(ENV) C:\my_project\my_project>yarn build_development
yarn run v1.22.19
warning package.json: No license field
$ cross-env NODE_PATH=./media/node_modules NODE_OPTIONS=--max_old_space_size=8192 ./media/node_modules/.bin/webpack --config webpack/webpack.config.dev.js
Done in 1.07s.

自定义命令yarn build_development在项目根目录中的package.json定义情况如下"build_development" 所示:

   "scripts": {
        "build_production": "cross-env NODE_PATH=./media/node_modules NODE_OPTIONS=--max_old_space_size=8192 NODE_ENV=production ./media/node_modules/.bin/webpack --config webpack/webpack.config.prod.js",
        "build_development": "cross-env NODE_PATH=./media/node_modules NODE_OPTIONS=--max_old_space_size=8192 ./media/node_modules/.bin/webpack --config webpack/webpack.config.dev.js",
        "build_test": "cross-env NODE_PATH=./media/node_modules NODE_OPTIONS=--max_old_space_size=8192 ./media/node_modules/.bin/webpack --config webpack/webpack.config.dev.js --env test=true",
        "start": "cross-env NODE_PATH=./media/node_modules cross-env NODE_OPTIONS=--max_old_space_size=8192 ./media/node_modules/.bin/webpack serve --config webpack/webpack.config.dev.js"
    },

它调用了webpack.config.dev.js文件,在这个文件中又调用了另一个webpack.common.js文件,这两个文件中与webpack-stats.json相关的部分似乎只有如下最后一行:

module.exports = () => {
    return new Promise((resolve, _reject) => {
        const createWebpackConfig = function(data) {  // reads from application's settings.py
            const parsedData = JSON.parse(data);
            
            const ROOT_DIR = parsedData['ROOT_DIR'];
            const APP_ROOT = parsedData['APP_ROOT'];
            const STATIC_URL = parsedData['STATIC_URL']
            const ARCHES_NAMESPACE_FOR_DATA_EXPORT = parsedData['ARCHES_NAMESPACE_FOR_DATA_EXPORT']
            const WEBPACK_DEVELOPMENT_SERVER_PORT = parsedData['WEBPACK_DEVELOPMENT_SERVER_PORT']

            console.log('Data imported from settings.py:', parsedData)
        
            const archesCoreEntryPointConfiguration = buildJavascriptFilepathLookup(Path.resolve(__dirname, ROOT_DIR, 'app', 'media', 'js'), {});
            const projectEntryPointConfiguration = buildJavascriptFilepathLookup(Path.resolve(__dirname, APP_ROOT, 'media', 'js'), {});
            
            const archesCoreJavascriptRelativeFilepathToAbsoluteFilepathLookup = Object.keys(archesCoreEntryPointConfiguration).reduce((acc, path) => {
                acc[path + '$'] = Path.resolve(__dirname, ROOT_DIR, 'app', 'media', 'js', `${path}.js`);
                return acc;
            }, {});
            
            const projectJavascriptRelativeFilepathToAbsoluteFilepathLookup = Object.keys(projectEntryPointConfiguration).reduce((acc, path) => {
                acc[path + '$'] = Path.resolve(__dirname, APP_ROOT, 'media', 'js', `${path}.js`);
                return acc;
            }, {});
            
            const javascriptRelativeFilepathToAbsoluteFilepathLookup = { 
                ...archesCoreJavascriptRelativeFilepathToAbsoluteFilepathLookup,
                ...projectJavascriptRelativeFilepathToAbsoluteFilepathLookup 
            };
            
            const { ARCHES_CORE_NODE_MODULES_ALIASES } = require(Path.resolve(__dirname, ROOT_DIR, 'webpack', 'webpack-node-modules-aliases.js'));
            const parsedArchesCoreNodeModulesAliases = Object.entries(JSON.parse(ARCHES_CORE_NODE_MODULES_ALIASES)).reduce((acc, [alias, executeableString]) => {
                // eval() should be safe here, it's running developer-defined code during build
                acc[alias] = eval(executeableString);
                return acc;
            }, {});

            let parsedProjectNodeModulesAliases = {};
            if (PROJECT_NODE_MODULES_ALIASES) {
                parsedProjectNodeModulesAliases = Object.entries(JSON.parse(PROJECT_NODE_MODULES_ALIASES)).reduce((acc, [alias, executeableString]) => {
                    // eval() should be safe here, it's running developer-defined code during build
                    acc[alias] = eval(executeableString);
                    return acc;
                }, {});
                
            }
            
            const nodeModulesAliases = {
                ...parsedArchesCoreNodeModulesAliases,
                ...parsedProjectNodeModulesAliases
            };
            
            const templateFilepathLookup = buildTemplateFilePathLookup(
                Path.resolve(__dirname, ROOT_DIR, 'app', 'templates'),
                Path.resolve(__dirname, APP_ROOT, 'templates')
            );
            
            const imageFilepathLookup = buildImageFilePathLookup(
                STATIC_URL,
                Path.resolve(__dirname, ROOT_DIR, 'app', 'media', 'img'),
                Path.resolve(__dirname, APP_ROOT, 'media', 'img')
            );
            
            resolve({
                entry: { 
                    ...archesCoreEntryPointConfiguration,
                    ...projectEntryPointConfiguration 
                },
                output: {
                    path: Path.resolve(__dirname, APP_ROOT, 'media', 'build'),
                    publicPath: STATIC_URL,
                    libraryTarget: 'amd-require',
                    clean: true,
                },
                plugins: [
                    new BundleTracker({ filename: Path.resolve(__dirname, `webpack-stats.json`) }),
                ],

操作环境、软件版本等信息:

win10, yarn1.22.19, webpack 5.78.0

尝试过的解决方法:

尝试使用命令npm install --save-dev webpack-bundle-analyzer,chatgpt说这个webpack-bundle-analyzer可以用来生成webpack-stats.json,但似乎无效

我想要达到的结果:

在上述版本的yarn和webpack条件下,运行生成前端资源包,使网站能够运行。

问题没看,被名字吸引进来了,记住你了

为了解决yarn 1.22.19 无法生成webpack-stats.json的问题,你可以先不使用自定义命令看下能够成功,以检查是否是你build_development写的有问题,其次只执行一两秒就结束了,说明没有完整执行,检查下使用到的资源或依赖的路径是否写错,尤其是相对路径,容易写错。最后是检查下yarn和webpack的版本是否匹配,更换版本看下