Hello @uladzimirkulesh
To prevent minification in your @wordpress/scripts build, you can add optimization: { minimize: false } to your webpack.config.js. For live reloading, set the proxy in webpack.config.js as follows:
devServer: { proxy: 'http://your-local-url.test', }
Alternatively, use the BrowserSync plugin with Local for similar live updates.
Hello, @dilip2615, thank you! But this code didn’t work for me: css code still unminified, server give an error “Invalid options object. Dev Server has been initialized using an options object that does not match the API schema…”. Maybe I made a mistake, can you check my webpack.config.js code:
// WordPress webpack config.
const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
// Plugins.
const RemoveEmptyScriptsPlugin = require( 'webpack-remove-empty-scripts' );
// Utilities.
const path = require( 'path' );
// Add any new entry points by extending the webpack config.
module.exports = {
...defaultConfig,
...{
entry: {
'js/global': path.resolve( process.cwd(), 'src/js', 'global.js' ),
'css/screen': path.resolve( process.cwd(), 'src/scss', 'screen.scss' ),
'css/editor': path.resolve( process.cwd(), 'src/scss', 'editor.scss' ),
},
plugins: [
// Include WP's plugin config.
...defaultConfig.plugins,
// Removes the empty .js files generated by webpack but
// sets it after WP has generated its *.asset.php file.
new RemoveEmptyScriptsPlugin( {
stage: RemoveEmptyScriptsPlugin.STAGE_AFTER_PROCESS_PLUGINS
} )
],
optimization: {
minimize: false
},
devServer: {
proxy: 'http://test.local/',
}
}
};
Hello @uladzimirkulesh
The error message you’re seeing is likely due to an incompatible devServer configuration. @wordpress/scripts doesn’t provide a direct dev server setup in its default configuration. Here’s an updated version of your webpack.config.js that might resolve the issue by ensuring that options match the required schema:
// WordPress webpack config.
const defaultConfig = require('@wordpress/scripts/config/webpack.config');
// Plugins.
const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');
// Utilities.
const path = require('path');
// Add any new entry points by extending the webpack config.
module.exports = {
...defaultConfig,
entry: {
'js/global': path.resolve(process.cwd(), 'src/js', 'global.js'),
'css/screen': path.resolve(process.cwd(), 'src/scss', 'screen.scss'),
'css/editor': path.resolve(process.cwd(), 'src/scss', 'editor.scss'),
},
plugins: [
// Include WP's plugin config.
...defaultConfig.plugins,
// Removes the empty .js files generated by webpack.
new RemoveEmptyScriptsPlugin({
stage: RemoveEmptyScriptsPlugin.STAGE_AFTER_PROCESS_PLUGINS,
}),
],
optimization: {
minimize: false,
},
};
Notes:
- For live reloading, I recommend using
BrowserSync with Local. Add browser-sync-webpack-plugin to your setup instead of devServer. This approach ensures compatibility without needing complex configurations.
one more thing if still your issue is note reslove please share the error screenshot here, because this issue is resolve in my local system
@dilip2615 thanks, but css files is still minimized and have no comments. May be
optimization: {
minimize: false,
}
works only for js-files? Because my js files now look like this:
/******/ (() => { // webpackBootstrap
/******/ "use strict";
;// ./src/js/components/theme-options.js
function themeOptions() {
console.log('A foo walks into a bar, takes a look around and says "Hello World!"');
}
;// ./src/js/global.js
themeOptions();
/******/ })()
;
