diff --git a/.changeset/stale-impalas-return.md b/.changeset/stale-impalas-return.md new file mode 100644 index 00000000..282ef278 --- /dev/null +++ b/.changeset/stale-impalas-return.md @@ -0,0 +1,5 @@ +--- +"10up-toolkit": minor +--- + +Add support to configure Webpack's publicPath diff --git a/packages/toolkit/README.md b/packages/toolkit/README.md index 0e9660dc..8a3fec17 100644 --- a/packages/toolkit/README.md +++ b/packages/toolkit/README.md @@ -184,20 +184,37 @@ module.exports = { Alternatively you can specify the paths in `package.json` ```json - "10up-toolkit": { - "devURL": "https://my-project.test", - "entry": { - //... - }, - "filenames": { - "block": "js/blocks/[name]/editor.js", - "blockCSS": "css/blocks/[name]/editor.css", - } - } +"10up-toolkit": { + "devURL": "https://my-project.test", + "entry": { + //... + }, + "filenames": { + "block": "js/blocks/[name]/editor.js", + "blockCSS": "css/blocks/[name]/editor.css", + } +} ``` Note that when overriding via the `filenames.config.js` you must export the filenames for all file types. +### Customizing public path + +When using toolkit in a React application, you might want to customize the public path so lazy loaded components know where the assets are. + +This can be tweaked in the options within `package.json`: + +```json +"10up-toolkit": { + "publicPath": "/my/custom/path" +} +``` + +Alternatively, you can set up `process.env.ASSET_PATH` to whatever path (or CDN) you want it to be. + +> **Warning** +> Please note that using `process.env.ASSET_PATH` will override the `publicPath` + ### WordPress Block Asset Handling _NOTE: Since 10up-toolkit@6 this `useBlockAssets` is on by default_ diff --git a/packages/toolkit/config/__tests__/__snapshots__/webpack-basic-config.js.snap b/packages/toolkit/config/__tests__/__snapshots__/webpack-basic-config.js.snap index 0e8ef953..3cb23ee7 100644 --- a/packages/toolkit/config/__tests__/__snapshots__/webpack-basic-config.js.snap +++ b/packages/toolkit/config/__tests__/__snapshots__/webpack-basic-config.js.snap @@ -379,6 +379,7 @@ Object { return isBlockAsset ? filenames.block : filenames.js; }, "path": "/dist", + "publicPath": "/", }, "performance": Object { "hints": "warning", @@ -1610,6 +1611,7 @@ Object { return isBlockAsset ? filenames.block : filenames.js; }, "path": "/dist", + "publicPath": "/", }, "performance": Object { "hints": "warning", diff --git a/packages/toolkit/config/__tests__/__snapshots__/webpack-cli-arguments.js.snap b/packages/toolkit/config/__tests__/__snapshots__/webpack-cli-arguments.js.snap index 8f23b0ac..4d523ef3 100644 --- a/packages/toolkit/config/__tests__/__snapshots__/webpack-cli-arguments.js.snap +++ b/packages/toolkit/config/__tests__/__snapshots__/webpack-cli-arguments.js.snap @@ -481,6 +481,7 @@ Object { return isBlockAsset ? filenames.block : filenames.js; }, "path": "/dist", + "publicPath": "/", }, "performance": Object { "hints": "warning", @@ -695,6 +696,7 @@ Object { return isBlockAsset ? filenames.block : filenames.js; }, "path": "/dist", + "publicPath": "/", }, "performance": Object { "hints": "warning", @@ -909,6 +911,7 @@ Object { return isBlockAsset ? filenames.block : filenames.js; }, "path": "/dist", + "publicPath": "/", }, "performance": Object { "hints": "warning", diff --git a/packages/toolkit/config/__tests__/__snapshots__/webpack-fast-refresh.js.snap b/packages/toolkit/config/__tests__/__snapshots__/webpack-fast-refresh.js.snap index 569aa0d5..5b34947c 100644 --- a/packages/toolkit/config/__tests__/__snapshots__/webpack-fast-refresh.js.snap +++ b/packages/toolkit/config/__tests__/__snapshots__/webpack-fast-refresh.js.snap @@ -193,6 +193,7 @@ Object { return isBlockAsset ? filenames.block : filenames.js; }, "path": "/dist", + "publicPath": "/", }, "performance": Object { "hints": "warning", diff --git a/packages/toolkit/config/webpack/output.js b/packages/toolkit/config/webpack/output.js index 523fd90d..e0e86ae4 100644 --- a/packages/toolkit/config/webpack/output.js +++ b/packages/toolkit/config/webpack/output.js @@ -3,7 +3,7 @@ const path = require('path'); module.exports = ({ isPackage, packageConfig: { packageType, main }, - projectConfig: { filenames, hot }, + projectConfig: { filenames, hot, publicPath }, buildFiles, }) => { if (isPackage) { @@ -26,6 +26,7 @@ module.exports = ({ clean: !hot, path: path.resolve(process.cwd(), 'dist'), chunkFilename: filenames.jsChunk, + publicPath, filename: (pathData) => { if (pathData.chunk.name === 'runtime') { return 'fast-refresh/hmr-runtime.js'; diff --git a/packages/toolkit/utils/config.js b/packages/toolkit/utils/config.js index 8aadb249..3e14b6f8 100644 --- a/packages/toolkit/utils/config.js +++ b/packages/toolkit/utils/config.js @@ -119,10 +119,11 @@ const getDefaultConfig = () => { analyze, hot, // true by default (if TENUP_NO_EXTERNALS is not set) - // if TENUP_NO_EXTERNALS is truthy then dependecyExternals is false + // if TENUP_NO_EXTERNALS is truthy then dependencyExternals is false wpDependencyExternals: typeof process.env.TENUP_NO_EXTERNALS === 'undefined' || !process.env.TENUP_NO_EXTERNALS, + publicPath: process.env.ASSET_PATH || '/', useBlockAssets: true, include, }; @@ -150,12 +151,14 @@ const getTenUpScriptsConfig = () => { const configInclude = config.include ?? []; const include = defaultConfig.include.length === 0 ? configInclude : defaultConfig.include; + const publicPath = process.env.ASSET_PATH || config.publicPath || defaultConfig.publicPath; return { // override default configs with user-defined config ...defaultConfig, ...config, include, + publicPath, // these properties must be merged filenames: { ...defaultConfig.filenames,