fix: failed to use html-loader (#3384)

web-infra-dev · Sep 5, 2024 · 638f733 · 638f733
1 parent 07158e1
commit 638f733
Show file tree

Hide file tree

Showing 7 changed files with 173 additions and 6 deletions.
diff --git a/e2e/cases/html-loader/index.test.ts b/e2e/cases/html-loader/index.test.ts
@@ -0,0 +1,44 @@
+import { build, dev, rspackOnlyTest } from '@e2e/helper';
+import { expect } from '@playwright/test';
+
+rspackOnlyTest(
+  'should allow to use html-loader in development',
+  async ({ page }) => {
+    const rsbuild = await dev({
+      cwd: __dirname,
+      page,
+    });
+
+    const files = await rsbuild.unwrapOutputJSON();
+    const filenames = Object.keys(files);
+
+    expect(
+      filenames.some((filename) =>
+        filename.includes('dist/static/image/image.png'),
+      ),
+    ).toBeTruthy();
+
+    const htmlFile = filenames.find((filename) => filename.endsWith('.html'));
+    expect(files[htmlFile!]).toContain('<img src="/static/image/image.png"');
+
+    await rsbuild.close();
+  },
+);
+
+rspackOnlyTest('should allow to use html-loader in production', async () => {
+  const rsbuild = await build({
+    cwd: __dirname,
+  });
+
+  const files = await rsbuild.unwrapOutputJSON();
+  const filenames = Object.keys(files);
+
+  expect(
+    filenames.some((filename) =>
+      filename.includes('dist/static/image/image.png'),
+    ),
+  ).toBeTruthy();
+
+  const htmlFile = filenames.find((filename) => filename.endsWith('.html'));
+  expect(files[htmlFile!]).toContain('<img src="/static/image/image.png"');
+});
diff --git a/e2e/cases/html-loader/package.json b/e2e/cases/html-loader/package.json
@@ -0,0 +1,8 @@
+{
+  "private": true,
+  "name": "@e2e/html-loader",
+  "version": "1.0.0",
+  "dependencies": {
+    "html-loader": "^5.1.0"
+  }
+}
diff --git a/e2e/cases/html-loader/rsbuild.config.ts b/e2e/cases/html-loader/rsbuild.config.ts
@@ -0,0 +1,27 @@
+import { defineConfig } from '@rsbuild/core';
+
+export default defineConfig({
+  tools: {
+    rspack: {
+      module: {
+        rules: [
+          {
+            test: /\.html$/,
+            use: ['html-loader'],
+          },
+        ],
+      },
+    },
+  },
+  output: {
+    filename: {
+      image: '[name][ext]',
+    },
+  },
+  dev: {
+    writeToDisk: true,
+  },
+  html: {
+    template: 'src/template.html',
+  },
+});
diff --git a/e2e/cases/html-loader/src/index.js b/e2e/cases/html-loader/src/index.js
@@ -0,0 +1,3 @@
+document.querySelector('#root').innerHTML = `
+<div class="content">Hello World</div>
+`;
diff --git a/e2e/cases/html-loader/src/template.html b/e2e/cases/html-loader/src/template.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>html-loader</title>
+  </head>
+  <body>
+    <nav>
+      <img src="../../../assets/image.png" alt="test" />
+    </nav>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -75,7 +75,7 @@
     "dotenv": "16.4.5",
     "dotenv-expand": "11.0.6",
     "fs-extra": "^11.2.0",
-    "html-rspack-plugin": "6.0.0",
+    "html-rspack-plugin": "6.0.1",
     "http-proxy-middleware": "^2.0.6",
     "jiti": "^1.21.6",
     "launch-editor-middleware": "^2.8.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml