I am setting up Slim 4 PHP application and I am building JS & CSS with Webpack 4. I followed code from Github and Slim tutorial but I always get the error:
Type: Twig\Error\LoaderError
Code: 0
Message: Webpack manifest file not exists.
My layout.twig file is failing on this line :
{% webpack_entry_js ‘vendor’ %}
and my webpack.config.js file contains:
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/']
}
});
When I run webpack compailer as: npx webpack --watch it works. Inside /public/assets folder I see compiled files.
Here is also package.json file:
"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"
}
I have tried many other ways, changing the modules versions (like Webpack 5 etc.) but without success.
For another project I used Symfony 4 with Encore module and it worked. But with Slim 4 no success so far.
Thank you for sharing your experiences.