Build,import themes plugin.bundle.js with Webpack in symfony
When do I run npm run watch in symfony then I got warning: "./locale" in plugin/bundle.js.
INFO: "assets/global/plugin/bundle.js" imported at app.js (assets/app.js)".
//app.js => path: assets/app.js
import './bootstrap.js';
import './config.js';
import moment from 'moment';
/*
* Welcome to your app's main JavaScript file!
*
* We recommend including the built version of this JavaScript file
* (and its CSS file) in your base layout (base.html.twig).
*/
// any CSS you import will output into a single css file (app.css in this case)
import './cms/assets/plugins/global/plugins.bundle.css'
import './cms/assets/css/style.bundle.css'
import './cms/assets/plugins/global/plugins.bundle.js';
import './cms/assets/js/scripts.bundle.js';
Replies (2)
To build and import themes with plugin.bundle.js using Webpack in Symfony, you need to configure Webpack Encore. First, install the necessary dependencies with npm install, then update webpack.config.js to include the bundle. Use import 'path-to-plugin.bundle.js'; in your JavaScript entry file to load it. Run npm run dev or npm run build to compile assets. This setup ensures smooth integration of themes in your Symfony project. Just like how speaker fix tools restore audio clarity, Webpack optimizes and structures your assets for better performance and maintainability.
Hi,
The warning ./locale in plugin/bundle.js typically happens because Webpack is trying to resolve and bundle all the locales provided by the moment library. Since moment includes a lot of locales you might not need, this can unnecessarily increase your JavaScript bundle size.
Make sure you’re not importing any unnecessary locales in your app.js. For example:
import moment from "moment";
// Explicitly import only the locales you need
import "moment/locale/en";
import "moment/locale/fr";
// Set the default locale
moment.locale("en");
This should help reduce the bundle size and remove the warning.
