fix(v2): fix markdown images always using webpack url-loader (#3180)

* fix markdown images always using file-loader + move assets to a dedicated subfolder

* update snapshot

packages/docusaurus-mdx-loader/package.json

@@ -10,9 +10,11 @@
   "dependencies": {
     "@babel/parser": "^7.9.4",
     "@babel/traverse": "^7.9.0",
+    "@docusaurus/core": "^2.0.0-alpha.60",
     "@mdx-js/mdx": "^1.5.8",
     "@mdx-js/react": "^1.5.8",
     "escape-html": "^1.0.3",
+    "file-loader": "^6.0.0",
     "fs-extra": "^8.1.0",
     "github-slugger": "^1.3.0",
     "gray-matter": "^4.0.2",
@@ -20,7 +22,8 @@
     "mdast-util-to-string": "^1.1.0",
     "remark-emoji": "^2.1.0",
     "stringify-object": "^3.3.0",
-    "unist-util-visit": "^2.0.2"
+    "unist-util-visit": "^2.0.2",
+    "url-loader": "^4.1.0"
   },
   "devDependencies": {
     "remark": "^12.0.0",

packages/docusaurus-mdx-loader/src/remark/transformImage/__tests__/__snapshots__/index.test.js.snap

@@ -12,11 +12,11 @@ exports[`transformImage plugin pathname protocol 1`] = `
 exports[`transformImage plugin transform md images to <img /> 1`] = `
 "![img](https://example.com/img.png)
 
-<img  src={require(\\"!url-loader!./img.png\\").default}  />
+<img  src={require(\\"!url-loader?limit=10000&name=assets/images/[name]-[hash].[ext]&fallback=file-loader!./img.png\\").default}  />
 
-<img alt={\\"img\\"} src={require(\\"!url-loader!./img.png\\").default}  />
+<img alt={\\"img\\"} src={require(\\"!url-loader?limit=10000&name=assets/images/[name]-[hash].[ext]&fallback=file-loader!./img.png\\").default}  />
 
-<img alt={\\"img\\"} src={require(\\"!url-loader!./img.png\\").default} title={\\"Title\\"} /> ![img](/img.png)
+<img alt={\\"img\\"} src={require(\\"!url-loader?limit=10000&name=assets/images/[name]-[hash].[ext]&fallback=file-loader!./img.png\\").default} title={\\"Title\\"} /> ![img](/img.png)
 
 ## Heading
 
@@ -24,6 +24,6 @@ exports[`transformImage plugin transform md images to <img /> 1`] = `
 ![img](./img.png)
 \`\`\`
 
-<img alt={\\"img\\"} src={require(\\"!url-loader!./img.png\\").default}  />
+<img alt={\\"img\\"} src={require(\\"!url-loader?limit=10000&name=assets/images/[name]-[hash].[ext]&fallback=file-loader!./img.png\\").default}  />
 "
 `;

packages/docusaurus-mdx-loader/src/remark/transformImage/index.js

@@ -9,6 +9,11 @@ const visit = require('unist-util-visit');
 const path = require('path');
 const url = require('url');
 const fs = require('fs-extra');
+const {getFileLoaderUtils} = require('@docusaurus/core/lib/webpack/utils');
+
+const {
+  loaders: {inlineMarkdownImageFileLoader},
+} = getFileLoaderUtils();
 
 // Needed to throw errors with computer-agnostic path messages
 // Absolute paths are too dependant of user FS
@@ -62,7 +67,7 @@ async function processImageNode(node, {filePath, staticDir}) {
     node.type = 'jsx';
     node.value = `<img ${node.alt ? `alt={"${node.alt}"}` : ''} ${
       node.url
-        ? `src={require("!url-loader!${
+        ? `src={require("${inlineMarkdownImageFileLoader}${
             node.url.startsWith('./') ? node.url : `./${node.url}`
           }").default}`
         : ''

packages/docusaurus/src/constants.ts

@@ -11,6 +11,6 @@ export const CONFIG_FILE_NAME = 'docusaurus.config.js';
 export const GENERATED_FILES_DIR_NAME = '.docusaurus';
 export const SRC_DIR_NAME = 'src';
 export const STATIC_DIR_NAME = 'static';
-export const STATIC_ASSETS_DIR_NAME = 'assets'; // webpack file-loader files
+export const STATIC_ASSETS_DIR_NAME = 'assets'; // files handled by webpack
 export const THEME_PATH = `${SRC_DIR_NAME}/theme`;
 export const DEFAULT_PORT = 3000;

packages/docusaurus/src/webpack/utils.ts

@@ -175,27 +175,41 @@ export function compile(config: Configuration[]): Promise<void> {
 
 // Inspired by https://github.com/gatsbyjs/gatsby/blob/8e6e021014da310b9cc7d02e58c9b3efe938c665/packages/gatsby/src/utils/webpack-utils.ts#L447
 export function getFileLoaderUtils() {
+  // files/images < 10kb will be inlined as base64 strings directly in the html
+  const urlLoaderLimit = 10000;
+
+  // defines the path/pattern of the assets handled by webpack
+  const fileLoaderFileName = (folder: string) =>
+    `${STATIC_ASSETS_DIR_NAME}/${folder}/[name]-[hash].[ext]`;
+
   const loaders = {
-    file: (options = {}) => {
+    file: (options: {folder: string}) => {
       return {
         loader: require.resolve(`file-loader`),
         options: {
-          name: `${STATIC_ASSETS_DIR_NAME}/[name]-[hash].[ext]`,
-          ...options,
+          name: fileLoaderFileName(options.folder),
         },
       };
     },
-    url: (options = {}) => {
+    url: (options: {folder: string}) => {
       return {
         loader: require.resolve(`url-loader`),
         options: {
-          limit: 10000,
-          name: `${STATIC_ASSETS_DIR_NAME}[name]-[hash].[ext]`,
+          limit: urlLoaderLimit,
+          name: fileLoaderFileName(options.folder),
           fallback: require.resolve(`file-loader`),
-          ...options,
         },
       };
     },
+
+    // TODO find a better solution to avoid conflicts with the ideal-image plugin
+    // TODO this may require a little breaking change for ideal-image users?
+    // Maybe with the ideal image plugin, all md images should be "ideal"?
+    // This is used to force url-loader+file-loader on markdown images
+    // https://webpack.js.org/concepts/loaders/#inline
+    inlineMarkdownImageFileLoader: `!url-loader?limit=${urlLoaderLimit}&name=${fileLoaderFileName(
+      'images',
+    )}&fallback=file-loader!`,
   };
 
   const rules = {
@@ -205,7 +219,7 @@ export function getFileLoaderUtils() {
      */
     images: (): RuleSetRule => {
       return {
-        use: [loaders.url()],
+        use: [loaders.url({folder: 'images'})],
         test: /\.(ico|svg|jpg|jpeg|png|gif|webp)(\?.*)?$/,
       };
     },
@@ -216,14 +230,14 @@ export function getFileLoaderUtils() {
      */
     media: (): RuleSetRule => {
       return {
-        use: [loaders.url()],
+        use: [loaders.url({folder: 'medias'})],
         test: /\.(mp4|webm|ogv|wav|mp3|m4a|aac|oga|flac)$/,
       };
     },
 
     otherAssets: (): RuleSetRule => {
       return {
-        use: [loaders.file()],
+        use: [loaders.file({folder: 'files'})],
         test: /\.(pdf|doc|docx|xls|xlsx|zip|rar)$/,
       };
     },