Symfony 5, Vue 2.6, Webpack 4
I have seen many guides explaining how to create a SPA, but right now I want to integrate Vue in just one view, as the app has many views and data, it would take couple of months before we can implement whole new framework in our app. Currently we are using webpack and we are having some problems with integration.So,
Would you use webpack encore instead of webpack and if so, why?
Our main goal is to optimize everything - what does webpack encore loads additionally that webpack doesn't have and does it contain bunch of useless stuff?
Importing modules in js files - js has no way of knowing the hash that the webpack generated, so importing must be done inside twig in the script block. You can only import modules at the top level, so putting script type=module solves that issue, but then browser cannot guess the MIME type of the .vue files, even when X-Content-Type-Options=nosniff - any workaround that?
Are there any other options to import asset from the webpack build including chunkhash?
Related
I guess I'll get some flak for even asking, but here we go.
I'm a full-stack web developer, and most of the projects I work in are based on WordPress. I start by developing front end mockups in CodeKit, using Pug, Sass and transpiled JS modules. It works mostly well, but it takes some self discipline and effort to keep things minimally modular, lean and clean.
I have also worked on some Vue.js projects, which I have absolulety loved. I have successfully combined both platforms, using WP as a headless CMS for Vue.js. But many WordPress projects just require a regular theme, coded in PHP with monolithic styles and scripts.
I would very much like to be able to code my mockups in Vue and somehow generate a completely static build, much like the one I get with CodeKit (or webpack, gulp, ...). All scripts bundled into a single JS file, all styles in a single CSS file. Then some other dev (or myself) could start building a WP theme from that static mockup.
Vue features I'd like to use:
.vue component files, with markup, scripts and styles within the same file
Component slots
I don't need routing, state store or anything fancy
Is this even possible?
I am creating a wordpress site with vuejs framework. I am about to put vuejs components into this directory.
wp-content/themes/{theme}/components
The problem is, I can't import vuejs components with ES6 import App from './components/App.vue' functionality.
I tried using CDN but I don't know how importing of components works.
Does anybody know?
the are 2 main solutions for this problem:
(best): compile your project (for example with the vue-CLI) in such a way that all imports used in the project are compiled into simple, browser-readable js files
use the http-vue-loader library to load components directly from the browser (this solution works perfectly, but in terms of performance with many components it is not recommended)
I need to implement gulp in symfony in a legacy application. The legacy <-> symfony application part is working, but I'm a bit stuck on the gulp <-> symfony part. The 'web' folder is called html in our application. In this folder, I have a components folder for libs like bootstrap, jquery, ..., and js, css, image,... folder. In our js folder, we have a config folder, which contains default configs for some libs (e.g. dataTables) and a extensions folder, which contains extensions (e.g. jquery extensions), next to some self-written js files. I need to combine these config/extension files with the js lib files.
My idea to do this, was to create a json object (called modules), with all assets. Then, I would loop over this modules object, and call the gulp tasks if needed.
e.g:
`var modules = {
bootstrap : {
css: ['/html/components/bootstrap/css/bootstrap.min.css, html/css/layout.css'],
fonts: ['html/components/bootstrap/fonts/*'],
js: ['/html/components/bootstrap/js/bootstrap.min.js']
}, ...
};`
for bootstrap, I would call a gulp task to minify and combine the css files and to update the urls and imports, a task copy the fonts to the html/fonts folder and a task to copy the js file to html/js
Is this a good approach? Or is there a better way of managing assets in symfony? (I know you have the Assetic bundle, but we do use es6 sometimes, so we need gulp to translate some js files with babel, and this is not possible (as far as I know, with Assetic)
I'll answer my own question, as it might help other people.
Symfony has introduced 'encore' for asset management. There's a chapter about encore. Encore uses webpack, which is a well-know module bundler.
I'm building a meteor app with meteor-angular2 package. But with .css it's quite unfunny so far.. As soon is try to import a css file in a component, meteor is "modules-loader" is telling that this is not a module i'm trying to import (true basically :D)
Now i'm fiddling around with a basic webpack+ng2 setup and i can get it easily running with direct imports of .css files in typescript - just because i can configure the webpack loaders correctly (you can even get css-modules in this way with ng2!)
So, in the docs of the latest meteor angular2 package release it is somwhere written that it is basically packing all the stuff with webpack.
What's the right way to modify this underlaying webpack config? Is it even possible? Do i have to fork the package repo to change it? At a first shot i didn't find the webpack stuff in there..
Can css/sass/stylus files be directly imported into Elm files in some way? The webpack css-loader module makes this possible in Javascript with an import './styles.css', but I can't find anything on how one might do it in Elm with or without Webpack.
I had the same question when I started looking into styles and I ended up making a POC of how that might look like by using Elm port and subscriptions to tell Webpack to fetch CSS modules.
Check it out: https://github.com/geekyme/elm-css-modules
I don't think this can be done directly, but you can create a bridging entry point for Webpack that will import everything, including CSS and Elm together, for bundling.
Check this out: http://www.elm-tutorial.org/050_starting/webpack.html#indexjs