0

我正在设置 Slim 4 PHP 应用程序，并且正在使用 Webpack 4 构建 JS 和 CSS。我遵循了Github和Slim 教程中的代码，但我总是收到错误：

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/']
        }
    });

当我运行 webpack 编译器时：npx webpack --watch它可以工作。在/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 还没有成功。

感谢您分享您的经验。

4

1 回答 1

0

解决方案：

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

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

我在Odin博客上找到的。但是在我将其更改为：

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

应用程序开始工作。

如果您有兴趣了解更多细节，我还在Slim 论坛上开设了特别主题。

于 2020-12-22T20:26:43.913 回答