ENHANCEMENT: Using webpack again

This commit is contained in:
Jeroen De Meerleer 2022-09-12 15:18:11 +02:00
parent 62fd0a4e81
commit 04b843ef44
Signed by: JeroenED
GPG Key ID: 28CCCB8F62BFADD6
12 changed files with 11656 additions and 1307 deletions

7
.gitignore vendored Normal file → Executable file
View File

@ -16,3 +16,10 @@ public/assets/
/node_modules/ /node_modules/
/public/build/ /public/build/
###< pentatrion/vite-bundle ### ###< pentatrion/vite-bundle ###
###> symfony/webpack-encore-bundle ###
/node_modules/
/public/build/
npm-debug.log
yarn-error.log
###< symfony/webpack-encore-bundle ###

2
composer.json Normal file → Executable file
View File

@ -8,13 +8,13 @@
"ext-ctype": "*", "ext-ctype": "*",
"ext-iconv": "*", "ext-iconv": "*",
"erusev/parsedown": "^1.7", "erusev/parsedown": "^1.7",
"pentatrion/vite-bundle": "^v2.0",
"symfony/console": "6.0.*", "symfony/console": "6.0.*",
"symfony/dotenv": "6.0.*", "symfony/dotenv": "6.0.*",
"symfony/flex": "^2", "symfony/flex": "^2",
"symfony/framework-bundle": "6.0.*", "symfony/framework-bundle": "6.0.*",
"symfony/runtime": "6.0.*", "symfony/runtime": "6.0.*",
"symfony/twig-bundle": "6.0.*", "symfony/twig-bundle": "6.0.*",
"symfony/webpack-encore-bundle": "^1.15",
"symfony/yaml": "6.0.*" "symfony/yaml": "6.0.*"
}, },
"config": { "config": {

595
composer.lock generated Normal file → Executable file

File diff suppressed because it is too large Load Diff

2
config/bundles.php Normal file → Executable file
View File

@ -3,5 +3,5 @@
return [ return [
Symfony\Bundle\FrameworkBundle\FrameworkBundle::class => ['all' => true], Symfony\Bundle\FrameworkBundle\FrameworkBundle::class => ['all' => true],
Symfony\Bundle\TwigBundle\TwigBundle::class => ['all' => true], Symfony\Bundle\TwigBundle\TwigBundle::class => ['all' => true],
Pentatrion\ViteBundle\PentatrionViteBundle::class => ['all' => true], Symfony\WebpackEncoreBundle\WebpackEncoreBundle::class => ['all' => true],
]; ];

View File

@ -0,0 +1,49 @@
webpack_encore:
# The path where Encore is building the assets - i.e. Encore.setOutputPath()
output_path: '%kernel.project_dir%/public/build'
# If multiple builds are defined (as shown below), you can disable the default build:
# output_path: false
# Set attributes that will be rendered on all script and link tags
script_attributes:
defer: true
# Uncomment (also under link_attributes) if using Turbo Drive
# https://turbo.hotwired.dev/handbook/drive#reloading-when-assets-change
# 'data-turbo-track': reload
# link_attributes:
# Uncomment if using Turbo Drive
# 'data-turbo-track': reload
# If using Encore.enableIntegrityHashes() and need the crossorigin attribute (default: false, or use 'anonymous' or 'use-credentials')
# crossorigin: 'anonymous'
# Preload all rendered script and link tags automatically via the HTTP/2 Link header
# preload: true
# Throw an exception if the entrypoints.json file is missing or an entry is missing from the data
# strict_mode: false
# If you have multiple builds:
# builds:
# pass "frontend" as the 3rg arg to the Twig functions
# {{ encore_entry_script_tags('entry1', null, 'frontend') }}
# frontend: '%kernel.project_dir%/public/frontend/build'
# Cache the entrypoints.json (rebuild Symfony's cache when entrypoints.json changes)
# Put in config/packages/prod/webpack_encore.yaml
# cache: true
framework:
assets:
json_manifest_path: '%kernel.project_dir%/public/build/manifest.json'
#when@prod:
# webpack_encore:
# # Cache the entrypoints.json (rebuild Symfony's cache when entrypoints.json changes)
# # Available in version 1.2
# cache: true
#when@test:
# webpack_encore:
# strict_mode: false

View File

@ -1,3 +0,0 @@
_pentatrion_vite:
prefix: /build
resource: "@PentatrionViteBundle/Resources/config/routing.yaml"

12156
package-lock.json generated Normal file → Executable file

File diff suppressed because it is too large Load Diff

12
package.json Normal file → Executable file
View File

@ -11,15 +11,15 @@
"js-cookie": "^3.0.1" "js-cookie": "^3.0.1"
}, },
"devDependencies": { "devDependencies": {
"@symfony/webpack-encore": "^3.1.0",
"sass": "^1.45.2", "sass": "^1.45.2",
"sass-loader": "^12.4.0", "sass-loader": "^13.0",
"vite": "~3.0", "core-js": "^3.24"
"vite-plugin-symfony": "^0.4"
}, },
"scripts": { "scripts": {
"watch": "vite build --minify=false --sourcemap --watch", "watch" : "encore dev --watch",
"build-dev": "vite build --minify=false --sourcemap", "build-dev": "encore dev",
"build": "vite build" "build": "encore prod"
}, },
"repository": { "repository": {
"type": "git", "type": "git",

19
symfony.lock Normal file → Executable file
View File

@ -173,6 +173,25 @@
"symfony/var-exporter": { "symfony/var-exporter": {
"version": "v6.0.7" "version": "v6.0.7"
}, },
"symfony/webpack-encore-bundle": {
"version": "1.15",
"recipe": {
"repo": "github.com/symfony/recipes",
"branch": "main",
"version": "1.10",
"ref": "2e458cc7e6f1df1dad890eb104b81e4f302c9bd4"
},
"files": [
"assets/app.js",
"assets/bootstrap.js",
"assets/controllers.json",
"assets/controllers/hello_controller.js",
"assets/styles/app.css",
"config/packages/webpack_encore.yaml",
"package.json",
"webpack.config.js"
]
},
"symfony/yaml": { "symfony/yaml": {
"version": "v6.0.3" "version": "v6.0.3"
}, },

4
templates/page.html.twig Normal file → Executable file
View File

@ -6,9 +6,9 @@
{% endblock %} {% endblock %}
{% block styles %} {% block styles %}
{{ vite_entry_link_tags('page') }} {{ encore_entry_link_tags('page') }}
{% endblock %} {% endblock %}
{% block scripts %} {% block scripts %}
{{ vite_entry_script_tags('page') }} {{ encore_entry_script_tags('page') }}
{% endblock %} {% endblock %}

View File

@ -1,25 +0,0 @@
import { defineConfig } from "vite";
import symfonyPlugin from "vite-plugin-symfony";
/* if you're using React */
// import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [
/* react(), // if you're using React */
symfonyPlugin(),
],
root: ".",
base: "/build/",
build: {
manifest: true,
emptyOutDir: true,
assetsDir: "",
outDir: "./public/build",
rollupOptions: {
input: {
page: "./assets/js/page.js"
},
},
},
});

75
webpack.config.js Normal file
View File

@ -0,0 +1,75 @@
const Encore = require('@symfony/webpack-encore');
// Manually configure the runtime environment if not already configured yet by the "encore" command.
// It's useful when you use tools that rely on webpack.config.js file.
if (!Encore.isRuntimeEnvironmentConfigured()) {
Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}
Encore
// directory where compiled assets will be stored
.setOutputPath('public/build/')
// public path used by the web server to access the output path
.setPublicPath('/build')
// only needed for CDN's or sub-directory deploy
//.setManifestKeyPrefix('build/')
/*
* ENTRY CONFIG
*
* Each entry will result in one JavaScript file (e.g. app.js)
* and one CSS file (e.g. app.css) if your JavaScript imports CSS.
*/
.addEntry('page', './assets/js/page.js')
// enables the Symfony UX Stimulus bridge (used in assets/bootstrap.js)
//.enableStimulusBridge('./assets/controllers.json')
// When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
.splitEntryChunks()
// will require an extra script tag for runtime.js
// but, you probably want this, unless you're building a single-page app
.enableSingleRuntimeChunk()
/*
* FEATURE CONFIG
*
* Enable & configure other features below. For a full
* list of features, see:
* https://symfony.com/doc/current/frontend.html#adding-more-features
*/
.cleanupOutputBeforeBuild()
//.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
// enables hashed filenames (e.g. app.abc123.css)
.enableVersioning(Encore.isProduction())
.configureBabel((config) => {
config.plugins.push('@babel/plugin-proposal-class-properties');
})
// enables @babel/preset-env polyfills
.configureBabelPresetEnv((config) => {
config.useBuiltIns = 'usage';
config.corejs = 3;
})
// enables Sass/SCSS support
.enableSassLoader()
// uncomment if you use TypeScript
//.enableTypeScriptLoader()
// uncomment if you use React
//.enableReactPreset()
// uncomment to get integrity="..." attributes on your script & link tags
// requires WebpackEncoreBundle 1.4 or higher
.enableIntegrityHashes()
// uncomment if you're having problems with a jQuery plugin
//.autoProvidejQuery()
;
module.exports = Encore.getWebpackConfig();