Open
Description
I have some static javascript files and images that change from time to time by developers. However, these aren't imported (or required) through any of the js entry points. I also need the folder structure to stay exactly as is since the files are used by another application.
I've been looking at copyFiles(). However, it doesn't perform any transformation (which is documented).
Is there a way to make it transform the files (e.g: javascript files are minified and jpg, png, svg files are optimised)?
At the moment I have created a separate webpack encore config entry just for these static files which won't perform any versioning etc which solves the folder structure issue. I just need the files to be processed.
Encore
// the project directory where all compiled assets will be stored
.setOutputPath('web/assets/static')
// the public path used by the web server to access the previous directory
.setPublicPath(publicPath + '/static')
// only needed for CDN's or sub-directory deploy
.setManifestKeyPrefix('assets/static/')
.copyFiles(
{
from: './assets/static',
to: '[path][name].[ext]',
pattern: /\.(png|jpg|jpeg|svg|js)$/,
},
)
.addStyleEntry('styles', './assets/static/styles.scss')
// will require an extra script tag for runtime.js
// but, you probably want this, unless you're building a single-page app
.disableSingleRuntimeChunk()
// empty the outputPath dir before each build
.cleanupOutputBeforeBuild()
// show OS notifications when builds finish/fail
.enableBuildNotifications()
// allow sass/scss files to be processed
.enableSassLoader()
// enable PostCSS support
.enablePostCssLoader()
.configureTerserPlugin((options) => {
options.cache = true;
options.parallel = true;
options.terserOptions = {
output: {
comments: false,
},
};
})
.configureOptimizeCssPlugin((options) => {
options.cssProcessor = require('cssnano');
options.cssProcessorPluginOptions = {
preset: ['default', { discardComments: { removeAll: true } }],
}
})
;
const staticFiles = Encore.getWebpackConfig();