yarn dev outputs files correctly but when running yarn prod the public folder (output) is empty .
Any workarounds or possible fixes ?
package.json
{ "name": "wordpress-webpack-workflow", "version": "1.1.4", "author": "WP-Strap", "license": "MIT", "homepage": "https://github.com/wp-strap/wordpress-webpack-workflow", "description": "Modern WebPack workflow for WordPress front-end development and testing (plugins & themes) with handy tools included.\n", "main": "index.js", "repository": { "type": "git", "url": "https://github.com/wp-strap/wordpress-webpack-workflow.git" }, "bugs": { "url": "https://github.com/wp-strap/wordpress-webpack-workflow/issues" }, "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "prod": "webpack --env NODE_ENV=production --env production", "prod:watch": "webpack --env NODE_ENV=production --env production --watch", "dev": "webpack --env NODE_ENV=development", "dev:watch": "webpack --env NODE_ENV=development --watch", "eslint": "eslint assets/src/js/**/*.js", "eslint:fix": "eslint assets/src/js/**/*.js --fix", "stylelint": "stylelint assets/src/**/**/*.{css,scss,pcss}", "stylelint:fix": "stylelint assets/src/**/**/*.{css,scss,pcss} --fix", "prettier": "prettier assets/src/js/**/*.js", "prettier:fix": "prettier --write assets/src/js/**/*.js", "translate": "wp-pot --src '**/**/**/*.php' --dest-file 'languages/local-site.pot' --package 'local-site' --domain 'local-site' --last-translator 'WP SCRIPT LAB <[email protected]>' --team 'WP SCRIPT LAB <[email protected]>' --bug-report 'local-site.com'" }, "babel": { "extends": "./webpack/babel.config.js" }, "eslintConfig": { "extends": [ "./webpack/.eslintrc.js" ] }, "prettier": "./webpack/.prettierrc.js", "stylelint": { "ignoreFiles": [ "./assets/public/css/**/*.css", "./vendor/**/**/*.css", "./node_modules/**/**/*.css", "./tests/**/**/*.css" ], "extends": [ "./webpack/.stylelintrc.js" ] }, "dependencies": {}, "devDependencies": { "@babel/core": "^7.12.10", "@babel/eslint-parser": "^7.12.1", "@babel/preset-env": "^7.12.11", "@wordpress/eslint-plugin": "^7.4.0", "autoprefixer": "^10.2.1", "babel-loader": "^8.2.2", "browser-sync": "^2.26.13", "browser-sync-webpack-plugin": "^2.3.0", "copy-webpack-plugin": "^7.0.0", "css-loader": "^5.0.1", "eslint": "^7.17.0", "eslint-webpack-plugin": "^2.4.1", "eslint-plugin-prettier": "^3.3.1", "glob-all": "^3.2.1", "image-minimizer-webpack-plugin": "^2.2.0", "imagemin-gifsicle": "^7.0.0", "imagemin-jpegtran": "^7.0.0", "imagemin-optipng": "^8.0.0", "imagemin-svgo": "^8.0.0", "mini-css-extract-plugin": "^1.3.3", "node-sass-magic-importer": "^5.3.2", "postcss": "^8.2.4", "postcss-advanced-variables": "^3.0.1", "postcss-import": "^14.0.0", "postcss-import-ext-glob": "^2.0.0", "postcss-loader": "^4.1.0", "postcss-nested": "^5.0.3", "postcss-nested-ancestors": "^2.0.0", "prettier": "^2.2.1", "purgecss-webpack-plugin": "^3.1.3", "sass": "^1.32.2", "sass-loader": "^10.1.0", "stylelint": "^13.8.0", "stylelint-scss": "^3.18.0", "stylelint-webpack-plugin": "^2.1.1", "webpack": "^5.12.3", "webpack-cli": "^4.3.1", "webpackbar": "^5.0.0-3", "wp-pot-cli": "^1.5.0" }, "keywords": [ "wordpress", "workflow", "webpack", "theme", "plugin", "WebPack", "BrowserSync", "PostCSS", "Autoprefixer", "PurgeCSS", "BabelJS", "Eslint", "Stylelint", "SCSS", "WP-Pot" ] }
config.production.js
const glob = require( 'glob-all' );
const PurgecssPlugin = require( 'purgecss-webpack-plugin' ) // A tool to remove unused CSS
module.exports = ( projectOptions ) => {
process.env.NODE_ENV = 'production'; // Set environment level to 'production'
/**
* The base skeleton
*/
const Base = require( './config.base' )( projectOptions );
/**
* CSS rules
*/
const cssRules = {
...Base.cssRules, ...{
// add CSS rules for production here
}
};
/**
* JS rules
*/
const jsRules = {
...Base.jsRules, ...{
// add JS rules for production here
}
};
/**
* Image rules
*/
const imageRules = {
...Base.imageRules, ...{
// add image rules for production here
}
}
/**
* Optimizations rules
*/
const optimizations = {
...Base.optimizations, ...{
minimize: true,
splitChunks: {
cacheGroups: {
styles: { // Configured for PurgeCSS
name: 'styles',
test: /\.css$/,
chunks: 'all',
enforce: true
}
}
}
// add optimizations rules for production here
}
}
/**
* Plugins
*/
const plugins = [
...Base.plugins, ...[
new PurgecssPlugin( { // Scans files and removes unused CSS
paths: glob.sync( projectOptions.projectCss.purgeCss.paths, { nodir: true } ),
} ),
// add plugins for production here
]
]
/**
* Add sourcemap for production if enabled
*/
const sourceMap = { devtool: false };
if ( projectOptions.projectSourceMaps.enable === true && (
projectOptions.projectSourceMaps.env === 'prod' || projectOptions.projectSourceMaps.env === 'dev-prod'
) ) {
sourceMap.devtool = projectOptions.projectSourceMaps.devtool;
}
/**
* The configuration that's being returned to Webpack
*/
return {
mode: 'production',
entry: projectOptions.projectJs.entry, // Define the starting point of the application.
output: {
path: projectOptions.projectOutput,
filename: projectOptions.projectJs.filename
},
devtool: sourceMap.devtool,
optimization: optimizations,
module: { rules: [ cssRules, jsRules, imageRules ], },
plugins: plugins,
}
}
config.base.js
/**
* CSS Rules
*/
const cssRules = {
test: projectOptions.projectCss.use === 'sass' ? projectOptions.projectCss.rules.sass.test : projectOptions.projectCss.rules.postcss.test,
exclude: /(node_modules|bower_components|vendor)/,
use: [
MiniCssExtractPlugin.loader, // Creates `style` nodes from JS strings
"css-loader", // Translates CSS into CommonJS
{ // loads the PostCSS loader
loader: "postcss-loader",
options: require( projectOptions.projectCss.postCss )( projectOptions )
}
],
};
if ( projectOptions.projectCss.use === 'sass' ) { // if chosen Sass then we're going to add the Sass loader
cssRules.use.push( { // Compiles Sass to CSS
loader: 'sass-loader',
options: {
sassOptions: { importer: magicImporter() } // add magic import functionalities to sass
}
} );
}
/**
* JavaScript rules
*/
const jsRules = {
test: projectOptions.projectJs.rules.test,
include: projectOptions.projectJsPath,
exclude: /(node_modules|bower_components|vendor)/,
use: 'babel-loader' // Configurations in "webpack/babel.config.js"
};
/**
* Images rules
*/
const imageRules = {
test: projectOptions.projectImages.rules.test,
use: [
{
loader: 'file-loader',// Or `url-loader` or your other loader
},
],
}
/**
* Optimization rules
*/
const optimizations = {};
/**
* Plugins
*/
const plugins = [
new WebpackBar( // Adds loading bar during builds
// Uncomment this to enable profiler https://github.com/nuxt-contrib/webpackbar#options
// { reporters: [ 'profile' ], profile: true }
),
new MiniCssExtractPlugin( { // Extracts CSS files
filename: projectOptions.projectCss.filename
} ),
new CopyPlugin( { // Copies images from src to public
patterns: [ { from: projectOptions.projectImagesPath, to: projectOptions.projectOutput + '/images' }, ],
} ),
new ImageMinimizerPlugin( { // Optimizes images
minimizerOptions: projectOptions.projectImages.minimizerOptions,
} ),
];
// Add browserSync to plugins if enabled
if ( projectOptions.browserSync.enable === true ) {
const browserSyncOptions = {
files: projectOptions.browserSync.files,
host: projectOptions.browserSync.host,
port: projectOptions.browserSync.port,
}
if ( projectOptions.browserSync.mode === 'server' ) {
Object.assign( browserSyncOptions, { server: projectOptions.browserSync.server } )
} else {
Object.assign( browserSyncOptions, { proxy: projectOptions.browserSync.proxy } )
}
plugins.push( new BrowserSyncPlugin( browserSyncOptions, { reload: projectOptions.browserSync.reload } ) )
}
return {
cssRules: cssRules, jsRules: jsRules, imageRules: imageRules, optimizations: optimizations, plugins: plugins
}
}
webpack.config.js
/**
This is a main entrypoint for Webpack config.
@SInCE 1.0.0
*/
const path = require( 'path' );
// Paths to find our files and provide BrowserSync functionality.
const projectPaths = {
projectDir: __dirname, // Current project directory absolute path.
projectJsPath: path.resolve( __dirname, 'assets/src/js' ),
projectScssPath: path.resolve( __dirname, 'assets/src/scss' ),
projectImagesPath: path.resolve( __dirname, 'assets/src/images' ),
projectOutput: path.resolve( __dirname, 'assets/public' ),
projectWebpack: path.resolve( __dirname, 'webpack' ),
};
// Files to bundle
const projectFiles = {
// BrowserSync settings
browserSync: {
enable: true, // enable or disable browserSync
host: 'localhost',
port: 3000,
mode: 'proxy', // proxy | server
server: { baseDir: [ 'public' ] }, // can be ignored if using proxy
proxy: 'local-site.local',
// BrowserSync will automatically watch for changes to any files connected to our entry,
// including both JS and Sass files. We can use this property to tell BrowserSync to watch
// for other types of files, in this case PHP files, in our project.
files: '//.php',
reload: true, // Set false to prevent BrowserSync from reloading and let Webpack Dev Server take care of this
// browse to http://localhost:3000/ during development,
},
// JS configurations for development and production
projectJs: {
eslint: true, // enable or disable eslint | this is only enabled in development env.
filename: 'js/[name].js',
entry: {
frontend: projectPaths.projectJsPath + '/frontend.js',
backend: projectPaths.projectJsPath + '/backend.js',
},
rules: {
test: /.m?js$/,
}
},
// CSS configurations for development and production
projectCss: {
postCss: projectPaths.projectWebpack + '/postcss.config.js',
stylelint: true, // enable or disable stylelint | this is only enabled in development env.
filename: 'css/[name].css',
use: 'sass', // sass || postcss
// ^ If you want to change from Sass to PostCSS or PostCSS to Sass then you need to change the
// styling files which are being imported in "assets/src/js/frontend.js" and "assets/src/js/backend.js".
// So change "import '../sass/backend.scss'" to "import '../postcss/backend.pcss'" for example
rules: {
sass: {
test: /.s[ac]ss$/i
},
postcss: {
test: /.pcss$/i
}
},
purgeCss: { // PurgeCSS is only being activated in production environment
paths: [ // Specify content that should be analyzed by PurgeCSS
__dirname + '/assets/src/js//',
__dirname + '/templates///',
__dirname + '/template-parts///',
__dirname + '/blocks///',
__dirname + '/*.php',
]
}
},
// Source Maps configurations
projectSourceMaps: {
// Sourcemaps are nice for debugging but takes lots of time to compile,
// so we disable this by default and can be enabled when necessary
enable: false,
env: 'dev', // dev | dev-prod | prod
// ^ Enabled only for development on default, use "prod" to enable only for production
// or "dev-prod" to enable it for both production and development
devtool: 'source-map' // type of sourcemap, see more info here: https://webpack.js.org/configuration/devtool/
// ^ If "source-map" is too slow, then use "cheap-source-map" which struck a good balance between build performance and debuggability.
},
// Images configurations for development and production
projectImages: {
rules: {
test: /.(jpe?g|png|gif|svg)$/i,
},
// Optimization settings
minimizerOptions: {
// Lossless optimization with custom option
// Feel free to experiment with options for better result for you
// More info here: https://webpack.js.org/plugins/image-minimizer-webpack-plugin/
plugins: [
[ 'gifsicle', { interlaced: true } ],
[ 'jpegtran', { progressive: true } ],
[ 'optipng', { optimizationLevel: 5 } ],
[ 'svgo', {
plugins: [
{ removeViewBox: false, },
],
}, ],
],
}
}
}
// Merging the projectFiles & projectPaths objects
const projectOptions = {
...projectPaths, ...projectFiles,
projectConfig: {
// add extra options here
}
}
// Get the development or production setup based
// on the script from package.json
module.exports = env => {
if ( env.NODE_ENV === 'production' ) {
return require( './webpack/config.production' )( projectOptions );
} else {
return require( './webpack/config.development' )( projectOptions );
}
};
Any help would be greatly appreciated .
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent