Skip to content

WP Scripts: Automatically detect entry points for the default JS and CSS files #66466

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
gziolo wants to merge 8 commits into from
Closed

WP Scripts: Automatically detect entry points for the default JS and CSS files #66466

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
1c36153
Scripts: Automatically detect entry points for the default JS and CSS…
gziolo Oct 25, 2024
db79971
Update packages/scripts/config/webpack.config.js
gziolo Nov 5, 2024
8c25bad
Improve documentation for the default webpack config
gziolo Nov 10, 2024
599854e
Improve code comments
gziolo Nov 10, 2024
cff1e67
Fix the file check broken on Windows
gziolo Nov 10, 2024
76bee7e
Improve code documentation
gziolo Nov 10, 2024
8ba5f49
Improve the documentation for the project structure and build scripts
gziolo Nov 10, 2024
7ce5696
Add changelog entry
gziolo Nov 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Fix the file check broken on Windows
  • Loading branch information
@gziolo
gziolo committed Nov 10, 2024
commit cff1e67c66c3981d7d2c2427446db683284a71b1
25 changes: 13 additions & 12 deletions packages/scripts/config/webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ const cssLoaders = [
{
loader: require.resolve( 'postcss-loader' ),
options: {
// Provide a fallback configuration if there's not
// Provides a fallback configuration if there's not
// one explicitly available in the project.
...( ! hasPostCSSConfig() && {
postcssOptions: {
Expand All @@ -78,7 +78,7 @@ const cssLoaders = [
...postcssPlugins,
require( 'postcss-import' ),
require( 'cssnano' )( {
// Provide a fallback configuration if there's not
// Provides a fallback configuration if there's not
// one explicitly available in the project.
...( ! hasCssnanoConfig() && {
preset: [
Expand Down Expand Up @@ -115,15 +115,16 @@ const baseConfig = {
extensions: [ '.jsx', '.ts', '.tsx', '...' ],
},
optimization: {
// Only concatenate modules in production, when not analyzing bundles.
// Only concatenates modules in production, when not analyzing bundles.
concatenateModules: isProduction && ! process.env.WP_BUNDLE_ANALYZER,
splitChunks: {
cacheGroups: {
style: {
type: 'css/mini-extract',
test: /[\\/]style(\.module)?\.(pc|sc|sa|c)ss$/,
chunks( chunk ) {
// Ensure that the main style file can still be generated when provided as an entry point.
// Ensures that the main style file can still be generated
// when provided as an entry point.
return chunk.name !== 'style';
},
enforce: true,
Expand Down Expand Up @@ -165,12 +166,12 @@ const baseConfig = {
loader: require.resolve( 'babel-loader' ),
options: {
// Babel uses a directory within local node_modules
// by default. Use the environment variable option
// by default. Uses the environment variable option
// to enable more persistent caching.
cacheDirectory:
process.env.BABEL_CACHE_DIRECTORY || true,

// Provide a fallback configuration if there's not
// Provides a fallback configuration if there's not
// one explicitly available in the project.
...( ! hasBabelConfig() && {
babelrc: false,
Expand Down Expand Up @@ -250,11 +251,11 @@ if ( process.env.WP_DEVTOOL ) {
}

if ( ! isProduction ) {
// Set default sourcemap mode if it wasn't set by WP_DEVTOOL.
// Sets the default sourcemap mode if it wasn't set by WP_DEVTOOL.
baseConfig.devtool = baseConfig.devtool || 'source-map';
}

// Add source-map-loader if devtool is set, whether in dev mode or not.
// Adds source-map-loader if devtool is set, whether in dev mode or not.
if ( baseConfig.devtool ) {
baseConfig.module.rules.unshift( {
test: /\.(j|t)sx?$/,
Expand Down Expand Up @@ -290,17 +291,17 @@ const scriptConfig = {

plugins: [
new webpack.DefinePlugin( {
// Inject the `SCRIPT_DEBUG` global, used for development features flagging.
// Injects the `SCRIPT_DEBUG` global, used for development features flagging.
'globalThis.SCRIPT_DEBUG': JSON.stringify( ! isProduction ),
SCRIPT_DEBUG: JSON.stringify( ! isProduction ),
} ),

// If we run a modules build, the 2 compilations can "clean" each other's output
// Prevent the cleaning from happening
// If a modules build run, the 2 compilations can "clean" each other's output.
// It prevents the cleaning from happening.
! hasExperimentalModulesFlag &&
new CleanWebpackPlugin( {
cleanAfterEveryBuildPatterns: [ '!fonts/**', '!images/**' ],
// Prevent it from deleting webpack assets during builds that have
// Prevents from deleting webpack assets during builds that have
// multiple configurations returned in the webpack config.
cleanStaleWebpackAssets: false,
} ),
Expand Down
5 changes: 4 additions & 1 deletion packages/scripts/utils/config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -319,7 +319,10 @@ function getWebpackEntryPoints( buildType ) {
}

const hasBlockJsonInRoot = blockMetadataFiles.includes(
fromProjectRoot( getWordPressSrcDirectory() ) + sep + 'block.json'
join(
fromProjectRoot( getWordPressSrcDirectory() ),
'block.json'
).replace( /\\/g, '/' )
);
if ( ! hasBlockJsonInRoot ) {
// 3. Checks whether a standard JavaScript file name can be detected in the defined source directory,
Expand Down