在./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的版本是否匹配,更换版本看下