Skip to content
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.

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

Align webpack's outputPath with the whole app #1194

Merged
merged 2 commits into from
Apr 20, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
14 changes: 6 additions & 8 deletions packages/webpack/src/ember-webpack.ts
Original file line number Diff line number Diff line change
Expand Up @@ -184,10 +184,10 @@ const Webpack: PackagerConstructor<Options> = class Webpack implements Packager
],
},
output: {
path: join(this.outputPath, 'assets'),
filename: `chunk.[chunkhash].js`,
chunkFilename: `chunk.[chunkhash].js`,
publicPath: publicAssetURL + 'assets/',
path: join(this.outputPath),
filename: `assets/chunk.[chunkhash].js`,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

do we have existing tests to assert these files are created in this folder?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tests likethese are directly inspecting the output files.

And the various tests/scenarios are ensuring that these files actually execute.

chunkFilename: `assets/chunk.[chunkhash].js`,
publicPath: publicAssetURL,
},
optimization: {
splitChunks: {
Expand Down Expand Up @@ -417,7 +417,7 @@ const Webpack: PackagerConstructor<Options> = class Webpack implements Packager

getOrCreate(output.entrypoints, id, () => new Map()).set(
variantIndex,
entrypointAssets.map(asset => 'assets/' + asset.name)
entrypointAssets.map(asset => asset.name)
);
if (variant.runtime !== 'browser') {
// in the browser we don't need to worry about lazy assets (they will be
Expand All @@ -428,9 +428,7 @@ const Webpack: PackagerConstructor<Options> = class Webpack implements Packager
flatMap(
chunks.filter(chunk => chunk.runtime?.includes(id)),
chunk => chunk.files
)
.filter(file => !entrypointAssets?.find(a => a.name === file))
.map(file => `assets/${file}`)
).filter(file => !entrypointAssets?.find(a => a.name === file)) as string[]
);
}
}
Expand Down
28 changes: 28 additions & 0 deletions packages/webpack/src/options.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,41 @@ export interface BabelLoaderOptions {
}

export interface Options {
// This allows you to extend the webpack config in arbitrary ways. Your
// changes will get applied on top of the defaults provided by
// @embroider/webpack.
webpackConfig: Configuration;

// the base public URL for your assets in production. Use this when you want
// to serve all your assets from a different origin (like a CDN) than your
// actual index.html will be served on.
//
// This should be a URL ending in "/".
//
// For example:
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thanks for adding additional docs + examples!

//
// 1. If your build produces the file "./dist/assets/chunk.123.js"
// 2. And you set publicAssetURL to "https://cdn/"
// 3. Browsers will try to locate the file at
// "https://cdn/assets/chunk.123.js".
//
// Notice that `publicAssetURL` gets applied relative to your whole built
// application -- not a particular subdirectory like "/assets". If you don't
// want a part of the path to show up in the public URLs, you should adjust the
// actual locations of the output files to remove that directory. For example:
//
// webpackConfig: {
// output: {
// // This overrides our default of "assets/chunk.[chunkhash].js"
// // to move the chunks to the root of the app, eliminating the assets subdirectory.
// filename: `mychunk.[chunkhash].js`,
// chunkFilename: `mychunk.[chunkhash].js`,
// },
// publicOutputPath: "https://cdn/",
// },
//
// The above example will result in CDN URLs like "https://cdn/mychunk.123.js".
//
publicAssetURL?: string;

// [thread-loader](https://github.com/webpack-contrib/thread-loader) options.
Expand Down