Title: Developing theme with @wordpress/scripts
Last modified: October 31, 2024

---

# Developing theme with @wordpress/scripts

 *  [Uladzimir Kulesh](https://wordpress.org/support/users/uladzimirkulesh/)
 * (@uladzimirkulesh)
 * [1 year, 5 months ago](https://wordpress.org/support/topic/developing-theme-with-wordpress-scripts/)
 * Hello! I’m trying to develop theme with [@wordpress](https://wordpress.org/support/users/wordpress/)/
   scripts ([https://developer.wordpress.org/themes/advanced-topics/build-process/](https://developer.wordpress.org/themes/advanced-topics/build-process/))
   and have some questions:
    1. Is there anything I can do to avoid minifying styles and js files when run build
       command (I nedd unminified files with comments)? What can I do? Could you give
       some examples?
    2. I use “Local” as a local server for development and see that my `package.json`
       may have script start:hot to view changes live in the browser. How can I change
       proxy in my `webpack.config.js`?

Viewing 4 replies - 1 through 4 (of 4 total)

 *  [Dilip Modhavadiya](https://wordpress.org/support/users/dilip2615/)
 * (@dilip2615)
 * [1 year, 5 months ago](https://wordpress.org/support/topic/developing-theme-with-wordpress-scripts/#post-18108107)
 * Hello [@uladzimirkulesh](https://wordpress.org/support/users/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.
 *  Thread Starter [Uladzimir Kulesh](https://wordpress.org/support/users/uladzimirkulesh/)
 * (@uladzimirkulesh)
 * [1 year, 5 months ago](https://wordpress.org/support/topic/developing-theme-with-wordpress-scripts/#post-18108701)
 * Hello, [@dilip2615](https://wordpress.org/support/users/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:
 *     ```wp-block-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/',}}};
       ```
   
 *  [Dilip Modhavadiya](https://wordpress.org/support/users/dilip2615/)
 * (@dilip2615)
 * [1 year, 5 months ago](https://wordpress.org/support/topic/developing-theme-with-wordpress-scripts/#post-18108750)
 * Hello [@uladzimirkulesh](https://wordpress.org/support/users/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:
 *     ```wp-block-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.
           new RemoveEmptyScriptsPlugin({
             stage: RemoveEmptyScriptsPlugin.STAGE_AFTER_PROCESS_PLUGINS,
           }),
         ],
         optimization: {
           minimize: false,
         },
       };
       ```
   
 * Notes:
    1. **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
 *  Thread Starter [Uladzimir Kulesh](https://wordpress.org/support/users/uladzimirkulesh/)
 * (@uladzimirkulesh)
 * [1 year, 5 months ago](https://wordpress.org/support/topic/developing-theme-with-wordpress-scripts/#post-18108983)
 * [@dilip2615](https://wordpress.org/support/users/dilip2615/) thanks, but css 
   files is still minimized and have no comments. May be
 *     ```wp-block-code
       optimization: {
           minimize: false,
         }
       ```
   
 * works only for js-files? Because my js files now look like this:
 *     ```wp-block-code
       /******/ (() => { // webpackBootstrap/******/ 	"use strict";;// ./src/js/components/theme-options.jsfunction themeOptions() {  console.log('A foo walks into a bar, takes a look around and says "Hello World!"');};// ./src/js/global.jsthemeOptions();/******/ })();
       ```
   

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Developing theme with @wordpress/scripts’ is closed to new replies.

## Tags

 * [development](https://wordpress.org/support/topic-tag/development/)

 * In: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
 * 6 replies
 * 2 participants
 * Last reply from: [Uladzimir Kulesh](https://wordpress.org/support/users/uladzimirkulesh/)
 * Last activity: [1 year, 5 months ago](https://wordpress.org/support/topic/developing-theme-with-wordpress-scripts/#post-18108983)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics