【问题标题】:Slim 4 & Webpack Error manifest file not existsSlim 4 & Webpack 错误清单文件不存在
【发布时间】:2020-12-17 15:01:27
【问题描述】:

我正在设置 Slim 4 PHP 应用程序,并且正在使用 Webpack 4 构建 JS 和 CSS。我遵循了来自 GithubSlim tutorial 的代码,但我总是得到错误:

Type: Twig\Error\LoaderError
Code: 0
Message: Webpack manifest file not exists.

我的 layout.twig 文件在这一行失败:

{% webpack_entry_js '供应商' %}

我的 webpack.config.js 文件包含:


    const path = require('path');
    // const webpack = require('webpack');
    const { CleanWebpackPlugin } = require('clean-webpack-plugin');
    const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
    const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    
    module.exports = (env, argv) => ({
        entry: {
            vendor: path.resolve(__dirname, './frontend/vendor/vendor.js'),
            layout: path.resolve(__dirname, './frontend/layout/layout.js')
        },
    
        output: {
            path: path.resolve(__dirname, 'public/assets'),
            publicPath: 'assets/',
            filename: '[name].bundle.js'
        },
    
        mode: 'production',    
    
        optimization: {
            splitChunks: {
                chunks: 'all',
                minSize: 20000,
                automaticNameDelimiter: '_'
            }        
        },
    
        performance: {
            maxEntrypointSize: 1024000,
            maxAssetSize: 1024000
        },
    
        resolve: {
            extensions: ['.js', '.ts', '.tsx', '.css', '.scss']
        },
    
        module: {
            rules: [
                {
                    test: /\.(png|jpg)$/,
                    use: [
                        'file-loader'
                    ]
                },            
                {
                    test: /\.js$/,
                    use: 'babel-loader',
                    exclude: /node_modules/
                },
                {
                    test: /\.tsx?$/,
                    use: ['babel-loader', 'ts-loader'],
                    exclude: /node_modules/
                },            
                {
                    test: /\.css$/,
                    use: [
                        MiniCssExtractPlugin.loader, 'css-loader'
                    ]
                },
                {
                    test: /\.scss$/,
                    use: [
                        MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'
                    ]
                },            
                {
                    test: /\.(ttf|eot|svg|woff|woff2)(\?[\s\S]+)?$/,
                    include: path.resolve(__dirname, './node_modules/@fortawesome/fontawesome-free/webfonts'),
                    use: {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: 'webfonts',
                            publicPath: '../webfonts',
                        },
                    }
                },
            ],
        },
    
        plugins: [
            new CleanWebpackPlugin(),
            new WebpackManifestPlugin({chunk: true, isChunk: true}),
            new MiniCssExtractPlugin({
                ignoreOrder: false,
                filename: '[name].bundle.css'
            }),
        ],
    
        watchOptions: {
            ignored: ['./node_modules/']
        }
    });

当我以 npx webpack --watch 运行 webpack 编译器时,它可以工作。在/public/assets 文件夹中,我看到了编译文件。 这里还有 package.json 文件:

 "dependencies": {
    "@fortawesome/fontawesome-free": "^5.15.1",
    "@popperjs/core": "^2.6.0",
    "bootstrap": "^4.5.3",
    "jquery": "^3.5.1",
    "lodash": "^4.17.20"
},
"devDependencies": {
    "@babel/core": "^7.11.6",
    "@babel/preset-env": "^7.12.11",
    "@babel/preset-react": "^7.12.10",
    "babel-loader": "^8.1.0",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^5.0.1",
    "file-loader": "^6.2.0",
    "mini-css-extract-plugin": "^1.3.3",
    "node-sass": "^5.0.0",
    "popper.js": "^1.16.1",
    "sass-loader": "^10.1.0",
    "style-loader": "^2.0.0",
    "webpack": "^4.44.2",
    "webpack-assets-manifest": "^3.1.1",
    "webpack-cli": "^4.2.0",
    "webpack-manifest-plugin": "^3.0.0"
}

我尝试了许多其他方法,更改模块版本(如 Webpack 5 等)但没有成功。 对于另一个项目,我使用了带有 Encore 模块的 Symfony 4,它工作正常。但到目前为止,Slim 4 还没有成功。

感谢您分享您的经验。

【问题讨论】:

  • 我已回滚您的编辑。在 Stack Overflow 上,解决方案 never 属于问题。如果你已经解决了自己的问题,那就太好了!您应该发布正确的答案。如果您还没有,也可以使用tour,看看这个网站如何保持问题和答案之间的清晰分离。

标签: webpack twig manifest.json slim-4


【解决方案1】:

解决方案:

我发现问题出在哪里:在 container.php 内部,我正在通过一行分配检索树枝设置:

$settings = $container->get('settings')['twig'];

我在 Odin 博客上找到的。但是在我改成之后:

$config = (array)$container->get('settings');
$settings = $config['twig'];

应用程序开始工作。

如果您有兴趣了解更多详细信息,我还在Slim discussion forum 上打开了特殊线程。

【讨论】:

    猜你喜欢
    • 2017-12-30
    • 1970-01-01
    • 2016-12-09
    • 2020-11-30
    • 2019-06-20
    • 2013-08-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多