fix(bundler-webpack): Fix runtimePublicPath effects assets url in css…

… file (#832) * fix(bundler-webpack): Fix runtimePublicPath effects assets url in css file * fix(bundler-webpack): Add test * fix(bundler-webpack): code format
umijs · Jun 23, 2022 · 9f6abc0 · 9f6abc0
1 parent 64c0a25
commit 9f6abc0
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 0 deletions.
diff --git a/packages/bundler-webpack/src/build.test.ts b/packages/bundler-webpack/src/build.test.ts
@@ -99,6 +99,9 @@ const expects: Record<string, Function> = {
   'postcss-flexbugs-fixes'({ files }: IOpts) {
     expect(files['index.css']).toContain(`.foo { flex: 1 1; }`);
   },
+  'runtime-public-path'({ files }: IOpts) {
+    expect(files['index.css']).toContain(`background: url(./static/`);
+  },
   svgo({ files }: IOpts) {
     expect(files['static']).toContain(EXISTS);
     expect(files['index.js']).toContain(`.svg`);

diff --git a/packages/bundler-webpack/src/fixtures/runtime-public-path/bg.jpg b/packages/bundler-webpack/src/fixtures/runtime-public-path/bg.jpg
diff --git a/packages/bundler-webpack/src/fixtures/runtime-public-path/config.ts b/packages/bundler-webpack/src/fixtures/runtime-public-path/config.ts
@@ -0,0 +1,3 @@
+export default {
+  runtimePublicPath: {}
+};
diff --git a/packages/bundler-webpack/src/fixtures/runtime-public-path/index.css b/packages/bundler-webpack/src/fixtures/runtime-public-path/index.css
@@ -0,0 +1,3 @@
+body {
+  background: url("./bg.jpg");
+}
diff --git a/packages/bundler-webpack/src/fixtures/runtime-public-path/index.ts b/packages/bundler-webpack/src/fixtures/runtime-public-path/index.ts
@@ -0,0 +1 @@
+import './index.css';
diff --git a/packages/bundler-webpack/src/plugins/RuntimePublicPathPlugin.ts b/packages/bundler-webpack/src/plugins/RuntimePublicPathPlugin.ts
@@ -10,6 +10,9 @@ export class RuntimePublicPathPlugin {
         // The hook to get the public path ('__webpack_require__.p')
         // https://github.com/webpack/webpack/blob/master/lib/runtime/PublicPathRuntimeModule.js
         if (module.constructor.name === 'PublicPathRuntimeModule') {
+          // If current public path is handled by mini-css-extract-plugin, skip it
+          if (module.getGeneratedCode().includes('webpack:///mini-css-extract-plugin'))
+            return;
           // @ts-ignore
           module._cachedGeneratedCode = `__webpack_require__.p = (globalThis || window).publicPath || '/';`;
         }