fix: 修复 webpack 构建 publicPath 使用相对路径,导致 css 里面依赖资源路径异常问题

WeBankFinTech · Mar 8, 2024 · e0e73f9 · e0e73f9
1 parent 81e503b
commit e0e73f9
Show file tree

Hide file tree

Showing 8 changed files with 157 additions and 96 deletions.
diff --git a/packages/fes-builder-webpack/package.json b/packages/fes-builder-webpack/package.json
@@ -55,15 +55,15 @@
         "html-webpack-tags-plugin": "^3.0.0",
         "less": "^4.1.3",
         "less-loader": "^11.1.0",
-        "mini-css-extract-plugin": "^2.7.5",
+        "mini-css-extract-plugin": "^2.8.1",
         "postcss": "^8.4.33",
         "postcss-flexbugs-fixes": "^5.0.2",
         "postcss-loader": "^7.1.0",
         "postcss-safe-parser": "^6.0.0",
         "style-loader": "^3.3.2",
         "terser-webpack-plugin": "^5.3.6",
-        "vue-loader": "^17.0.1",
-        "webpack": "^5.87.0",
+        "vue-loader": "^17.4.2",
+        "webpack": "^5.90.3",
         "webpack-5-chain": "^8.0.1",
         "webpack-bundle-analyzer": "^4.4.0",
         "webpack-dev-server": "^4.15.1",

diff --git a/packages/fes-builder-webpack/src/plugins/common/webpackConfig/css.js b/packages/fes-builder-webpack/src/plugins/common/webpackConfig/css.js
@@ -14,10 +14,16 @@ function createRules({ isDev, webpackConfig, config, lang, test, loader, options
     function applyLoaders(rule, cssLoaderOption = {}) {
         if (isDev || !config.extraCSS) {
             rule.use('extra-css-loader').loader(require.resolve('style-loader')).options(Object.assign({}, styleLoaderOption));
-        } else {
+        }
+        else {
+            const loaderOptions = config.extraCSS?.loader ?? {};
+
+            if (!loaderOptions.publicPath && config.publicPath.startsWith('./')) {
+                loaderOptions.publicPath = '../';
+            }
             rule.use('extra-css-loader')
                 .loader(require('mini-css-extract-plugin').loader)
-                .options(config.extraCSS?.loader ?? {});
+                .options(loaderOptions);
         }
 
         rule.use('css-loader')

diff --git a/packages/fes-template/package.json b/packages/fes-template/package.json
@@ -34,7 +34,6 @@
         "@fesjs/plugin-sass": "workspace:*",
         "@fesjs/plugin-swc": "workspace:*",
         "@fesjs/plugin-watermark": "workspace:*",
-        "@fesjs/plugin-windicss": "workspace:*",
         "core-js": "3.29.1",
         "pinia": "^2.0.33",
         "vue": "^3.2.47"

diff --git a/packages/fes-template/src/global.css b/packages/fes-template/src/global.css
@@ -0,0 +1,4 @@
+.page {
+    height: 1000px;
+    background-image: url('~@/images/hello.png');
+}
diff --git a/packages/fes-template/src/global.scss b/packages/fes-template/src/global.scss
diff --git a/packages/fes-template/src/images/hello.png b/packages/fes-template/src/images/hello.png
diff --git a/packages/fes-template/src/pages/index.vue b/packages/fes-template/src/pages/index.vue
@@ -24,8 +24,9 @@ function go() {
 }
 </script>
 
-<style>
+<style lang="less">
 .page {
     height: 1000px;
+    background-image: url('@/images/hello.png');
 }
 </style>