Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
@symfony/webpack-encore
Advanced tools
Webpack Encore is a simpler way to integrate Webpack into your application
@symfony/webpack-encore is a wrapper for Webpack that simplifies the process of setting up and managing a Webpack configuration. It is particularly useful for Symfony projects but can be used in any JavaScript project. It provides a clean and fluent API to handle common tasks such as compiling JavaScript, CSS, and other assets.
Compiling JavaScript
This code sample demonstrates how to set up a basic Webpack configuration to compile JavaScript files. It specifies the output path, public path, and entry point for the JavaScript files. It also enables source maps and versioning for production builds.
const Encore = require('@symfony/webpack-encore');
Encore
.setOutputPath('public/build/')
.setPublicPath('/build')
.addEntry('app', './assets/js/app.js')
.enableSingleRuntimeChunk()
.cleanupOutputBeforeBuild()
.enableSourceMaps(!Encore.isProduction())
.enableVersioning(Encore.isProduction());
module.exports = Encore.getWebpackConfig();
Compiling CSS
This code sample shows how to configure Webpack to compile CSS files. It adds a style entry point and enables the Sass and PostCSS loaders to process CSS and SCSS files.
const Encore = require('@symfony/webpack-encore');
Encore
.setOutputPath('public/build/')
.setPublicPath('/build')
.addStyleEntry('styles', './assets/css/styles.css')
.enableSassLoader()
.enablePostCssLoader();
module.exports = Encore.getWebpackConfig();
Handling Images and Fonts
This code sample demonstrates how to handle image and font files in a Webpack configuration. It uses the file-loader to process these assets and specifies the output directory and naming convention for the files.
const Encore = require('@symfony/webpack-encore');
Encore
.setOutputPath('public/build/')
.setPublicPath('/build')
.addEntry('app', './assets/js/app.js')
.addLoader({
test: /\.(png|jpg|jpeg|gif|ico|svg|webp)$/,
loader: 'file-loader',
options: {
name: 'images/[name].[hash:8].[ext]'
}
})
.addLoader({
test: /\.(woff|woff2|ttf|eot|otf)$/,
loader: 'file-loader',
options: {
name: 'fonts/[name].[hash:8].[ext]'
}
});
module.exports = Encore.getWebpackConfig();
Webpack is a powerful module bundler for JavaScript applications. It allows you to bundle JavaScript files for usage in a browser and has a rich ecosystem of plugins and loaders. Unlike @symfony/webpack-encore, Webpack requires more manual configuration and setup.
Parcel is a web application bundler that offers a zero-configuration setup. It automatically handles common tasks such as compiling JavaScript, CSS, and other assets. Parcel is easier to set up compared to @symfony/webpack-encore but may not offer the same level of customization.
Rollup is a module bundler for JavaScript that focuses on creating smaller and faster bundles. It is particularly well-suited for libraries and applications that need to be optimized for performance. Rollup requires more configuration compared to @symfony/webpack-encore but offers fine-grained control over the bundling process.
Webpack Encore is a simpler way to integrate Webpack into your application. It wraps Webpack, giving you a clean & powerful API for bundling JavaScript modules, pre-processing CSS & JS and compiling and minifying assets. Encore gives you a professional asset system that's a delight to use.
[!TIP] Symfony released an AssetMapper component, a production-ready simpler alternative to Webpack Encore that runs entirely in PHP.
Encore is inspired by Webpacker and Mix, but stays in the spirit of Webpack: using its features, concepts and naming conventions for a familiar feel. It aims to solve the most common Webpack use cases.
Encore is made by Symfony and works beautifully in Symfony applications. But it can easily be used in any application... in any language!
FAQs
Webpack Encore is a simpler way to integrate Webpack into your application
The npm package @symfony/webpack-encore receives a total of 144,390 weekly downloads. As such, @symfony/webpack-encore popularity was classified as popular.
We found that @symfony/webpack-encore demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.