feat: migrate webpack file-loader to asset modules #4708
Conversation
> Conflict: Multiple assets emit different content to the same filename assets/ideal-img/datagit.100.png see #4089 (comment)
slorber
added
the
pr: maintenance
|
[V1] Built with commit 645bf67 |
| node.url | ||
| ? `src={require("${inlineMarkdownImageFileLoader}${pathUrl}").default}` | ||
| : '' | ||
| node.url ? `src={require("${pathUrl}?${assetQuery}")}` : '' |
There was a problem hiding this comment.
I recommend to avoid this stuff, you can do src={new URL('./image.png', import.meta.url)}, it is more native for ES modules and in future we should prefer to this way to get asset URL
There was a problem hiding this comment.
Thanks, replaced and it seems to work as before
Is it planned to support some kind of ESM-based DX? (I mean similar to Snowpack?)
Is it the recommended way to link to a file now?
<a
target="_blank"
href={new URL(
'../../assets/docusaurus-asset-example-pdf.pdf',
import.meta.url,
).toString()}>
Download this PDF
</a>There was a problem hiding this comment.
Is it planned to support some kind of ESM-based DX? (I mean similar to Snowpack?)
We thought about it and measured it, but at the moment memory cache (default in development mode) is faster and more stable, try to get snowpack and build big project and watch it, most likely you won't even be able to run it, with 5k modules my browser just freeze, with 10k snowpack fails.
In only JS world it is easier to implement ESM in browser, because you need parse import/export tokens and build graph and watch them, but when you get ts/css/assets/less/sass/pofyfills/etc and etc it is not easy, you need to write tokenizer for each source and regexps is not safe solution, other problems source maps (here long story).
There is also a problem that dev and prod will be different, it can lead to unexpected problems too.
And here a lot of limitations.
I don't want to say it is impossible, I want to say we need some more time for this.
Is it the recommended way to link to a file now?
Yes, we don't have import file from './text.pdf' in spec, so it is recommend way, maybe import assert will change something in future https://github.com/tc39/proposal-import-assertions
| function fontAssetRule(): RuleSetRule { | ||
| return { | ||
| ...baseAssetRule('fonts'), | ||
| test: /\.(woff|woff2|eot|ttf|otf)$/, |
There was a problem hiding this comment.
Small note - extensions can be woff, WOFF, so I prefer to use i flag for all regexp, but this not related to this PR 😄
# Conflicts: # packages/docusaurus-mdx-loader/src/remark/transformImage/index.js # packages/docusaurus-mdx-loader/src/remark/transformLinks/index.js
Josh-Cena
added
the
status: blocked
| @@ -108,6 +108,7 @@ export function createBaseConfig( | |||
| chunkFilename: isProd | |||
| ? 'assets/js/[name].[contenthash:8].js' | |||
| : '[name].js', | |||
| assetModuleFilename: 'assets/[name]-[hash][ext]', | |||
There was a problem hiding this comment.
| assetModuleFilename: 'assets/[name]-[hash][ext]', | |
| assetModuleFilename: 'assets/[name]-[contenthash][ext]', |
Usually contenthash gives better caching results.
|
Note for self, upgrade to css-loader 6 as part of this PR (see also #6424) |
Josh-Cena
changed the title
Breaking changes
require("./img/image.png").defaultbecomesrequire("./img/image.png")Motivation
url-loader and file-loader are going to be deprecated in favor of asset modules
This is an attempt to migrate to asset modules.
Some initial problems encountered:
cc @alexander-akait
Have you read the Contributing Guidelines on pull requests?
yes
Test Plan
preview
Related PRs
Follow-up of #4089