My Webpack is set up to randomise variable names, remove blank space, all the basics to basically obfuscate my javascript files and stop them being human-readable.
I have my files set up sort of like:
/src/
index.php
/working/
test.php
/js/
app.js
index.js
/working/
test.js
/css/
... the same as above but .css not .js
Now it’s supposed to obfuscate the files when outputting to /dist/ but while it does do this for app.js it doesn’t for index.js or test.js which I can’t quite figure out why or how to fix it.
My webpack.prod.config.js file (for production mode) is as follows:
/* eslint-disable import/no-extraneous-dependencies */
const { merge } = require('webpack-merge');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const webpackConfiguration = require('../webpack.config');
module.exports = merge(webpackConfiguration, {
mode: 'production',
devtool: false, // Disable source maps for production (optional)
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
parallel: true,
terserOptions: {
mangle: true,
compress: {
drop_console: true,
},
output: {
comments: false,
},
},
test: /.js$/i,
}),
new CssMinimizerPlugin(),
],
splitChunks: {
chunks: 'all',
automaticNameDelimiter: '-',
name: 'commons',
},
},
performance: {
maxEntrypointSize: 512000, // Max size for entry points
maxAssetSize: 512000, // Max size for assets
},
plugins: [],
});
but it just doesn’t apply to anything but app.js beyond including it in the resulting file multiple times (generally can appear up to 6-9 times, same for the page-specific .js files such as index.js)
I originally thought that it might’ve been the way the entry points were handled in the webpack.config.js file,
// Dynamically set entry points for each page
const entry = templateFiles.reduce((entries, template) => {
const pageName = path.relative(environment.paths.source, template.output).replace('.php', '');
// Automatically resolve JS files for each page
const jsFile = path.join(environment.paths.source, 'js', `${pageName}.js`);
const cssFile = path.join(environment.paths.source, 'css', `${pageName}.css`);
if (fs.existsSync(jsFile)) {
entries[pageName] = [jsFile, cssFile]; // Ensure the page has its JS and CSS
}
return entries;
}, {
app: path.join(environment.paths.source, 'js', 'app.js'),
});
so as an experiment I tried to add the index to alongside app as a default entry point that appears everywhere, but it made zero difference – helping me rule it out but not helping me find the solution.
}, {
app: path.join(environment.paths.source, 'js', 'app.js'),
index: path.join(environment.paths.source, 'js', 'index.js'),
});
