Merge branch 'master' into fix-peer-dependencies-error

CHANGELOG.md

@@ -1,3 +1,7 @@
+## [3.0.5](https://github.com/WeBankFinTech/fes.js/compare/v3.0.4...v3.0.5) (2023-04-17)
+
+
+
 ## [3.0.4](https://github.com/WeBankFinTech/fes.js/compare/v3.0.3...v3.0.4) (2023-04-11)
 
 

README.md

@@ -69,7 +69,7 @@ Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到
 | [@fesjs/plugin-windicss](http://fesjs.mumblefe.cn/reference/plugin/plugins/windicss.html)                                    | 基于 `windicss`，提供原子化 CSS 能力                                    |
 | [@fesjs/plugin-pinia](http://fesjs.mumblefe.cn/reference/plugin/plugins/pinia.html)                                          | pinia，状态处理                                                         |
 | [@fesjs/plugin-watermark](http://fesjs.mumblefe.cn/reference/plugin/plugins/watermark.html)                                  | 水印                                                                    |
-| [@fesjs/plugin-swc](http://fesjs.mumblefe.cn/reference/plugin/plugins/swc.html)                                              | 使用 swc-loader 构建                                                    |
+| [@fesjs/plugin-swc](http://fesjs.mumblefe.cn/reference/plugin/plugins/swc.html)                                              |  webpack构建中使用 swc-loader，构建速度蹭蹭蹭                                                    |
 
 ## 像数 1, 2, 3 一样容易
 

docs/reference/config/index.md

@@ -119,6 +119,7 @@ export default {
 
     路由是否按需加载
 
+
 ### inlineLimit
 
 -   类型： `number`
@@ -400,6 +401,26 @@ export default {
 
     用户配置 sourcemap 类型。详见 [ webpack#devtool 配置](https://webpack.js.org/configuration/devtool/#devtool)。
 
+### extraCSS
+
+-   类型： `object`
+-   默认值： `{}`
+-   详情：
+
+    配置如何使用`mini-css-extract-plugin`，默认使用插件的默认配置。`loader` 选项对应loader参数，`plugin`选项对应插件参数。例如：
+
+```js
+export default {
+    // 配置 mini-css-extract-plugin
+    extraCSS: {
+        loader: {
+            publicPath: (resourcePath, context) => `${path.relative(path.dirname(resourcePath), context)}/`,
+        },
+    },
+};
+
+```
+
 ### exportStatic
 
 -   类型： `object`

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fes.js",
-  "version": "3.0.4",
+  "version": "3.0.5",
   "description": "一个好用的前端管理台快速开发框架",
   "preferGlobal": true,
   "private": true,

packages/fes-builder-webpack/src/index.js

@@ -24,6 +24,7 @@ export default function () {
             require.resolve('./plugins/features/postcssLoader'),
             require.resolve('./plugins/features/nodeModulesTransform'),
             require.resolve('./plugins/features/vueLoader'),
+            require.resolve('./plugins/features/extraCSS'),
 
             // commands
             require.resolve('./plugins/commands/build'),

packages/fes-builder-webpack/src/plugins/commands/build/index.js

@@ -5,6 +5,7 @@
 
 import { relative } from 'path';
 import { existsSync } from 'fs';
+import { cleanTmpPathExceptCache, getBundleAndConfigs, printFileSizes } from '../../common/buildDevUtils';
 
 export default function (api) {
     const {
@@ -16,7 +17,6 @@ export default function (api) {
         command: 'build',
         description: 'build application for production',
         async fn() {
-            const { cleanTmpPathExceptCache, getBundleAndConfigs, printFileSizes } = require('../buildDevUtils');
             const { build } = require('./build');
 
             cleanTmpPathExceptCache({

packages/fes-builder-webpack/src/plugins/commands/dev/index.js

@@ -1,5 +1,7 @@
-const path = require('path');
-const fs = require('fs');
+import path from 'path';
+import fs from 'fs';
+import { cleanTmpPathExceptCache, getBundleAndConfigs } from '../../common/buildDevUtils';
+import connectHistoryMiddleware from './connectHistoryMiddleware';
 
 async function handleCacheClean(cwd) {
     return new Promise((resolve, reject) => {
@@ -49,8 +51,6 @@ export default (api) => {
             },
         ],
         async fn({ args = {} }) {
-            const { cleanTmpPathExceptCache, getBundleAndConfigs } = require('../buildDevUtils');
-            const connectHistoryMiddleware = require('./connectHistoryMiddleware').default;
             await handleCacheClean(api.paths.cwd);
 
             port = await getPort(process.env.PORT || args.port || api.config.devServer?.port);

packages/fes-builder-webpack/src/plugins/commands/webpack/index.js

@@ -1,3 +1,5 @@
+import { getBundleAndConfigs } from '../../common/buildDevUtils';
+
 export default function (api) {
     api.registerCommand({
         command: 'webpack',
@@ -26,7 +28,6 @@ export default function (api) {
         ],
         async fn({ options }) {
             const assert = require('assert');
-            const { getBundleAndConfigs } = require('../buildDevUtils');
             const { toString } = require('webpack-5-chain');
             const { highlight } = require('cli-highlight');
             const { bundleConfig } = await getBundleAndConfigs({ api });

packages/fes-builder-webpack/src/plugins/common/buildDevUtils.js

@@ -5,8 +5,8 @@
 
 import { join, resolve } from 'path';
 import { existsSync, readFileSync } from 'fs';
-import { rimraf, chalk } from '@fesjs/utils';
 import zlib from 'zlib';
+import { rimraf, chalk } from '@fesjs/utils';
 import getConfig from './webpackConfig';
 
 export async function getBundleAndConfigs({ api }) {

packages/fes-builder-webpack/src/plugins/common/webpackConfig/css.js

@@ -8,15 +8,16 @@
 // css 压缩 https://github.com/webpack-contrib/css-minimizer-webpack-plugin
 // 根据 entry 进行代码块拆分
 // 根据 entry 将文件输出到不同的文件夹
-
 import { deepmerge } from '@fesjs/utils';
 
 function createRules({ isDev, webpackConfig, config, lang, test, loader, options, browserslist, styleLoaderOption }) {
     function applyLoaders(rule, cssLoaderOption = {}) {
-        if (isDev) {
+        if (isDev || !config.extraCSS) {
             rule.use('extra-css-loader').loader(require.resolve('style-loader')).options(Object.assign({}, styleLoaderOption));
         } else {
-            rule.use('extra-css-loader').loader(require('mini-css-extract-plugin').loader).options({});
+            rule.use('extra-css-loader')
+                .loader(require('mini-css-extract-plugin').loader)
+                .options(config.extraCSS?.loader ?? {});
         }
 
         rule.use('css-loader')
@@ -90,13 +91,19 @@ export default function createCssWebpackConfig({ isDev, config, webpackConfig, b
         browserslist,
     });
 
-    if (!isDev) {
+    if (!isDev && config.extraCSS) {
         webpackConfig.plugin('extra-css').use(require.resolve('mini-css-extract-plugin'), [
-            {
-                filename: 'static/[name].[contenthash:8].css',
-                chunkFilename: 'static/[id].[contenthash:8].css',
-            },
+            Object.assign(
+                {
+                    filename: 'static/[name].[contenthash:8].css',
+                    chunkFilename: 'static/[id].[contenthash:8].css',
+                },
+                config.extraCSS?.plugin ?? {},
+            ),
         ]);
+    }
+
+    if (!isDev) {
         webpackConfig.optimization.minimizer('css').use(require.resolve('css-minimizer-webpack-plugin'), [{}]);
     }
 

packages/fes-builder-webpack/src/plugins/features/extraCSS.js

@@ -0,0 +1,14 @@
+export default (api) => {
+    api.describe({
+        key: 'extraCSS',
+        config: {
+            schema(joi) {
+                return joi.object({
+                    plugin: joi.object(),
+                    loader: joi.object(),
+                });
+            },
+            default: {},
+        },
+    });
+};

packages/fes-builder-webpack/types.d.ts

@@ -1,29 +1,30 @@
-import Config from 'webpack-5-chain'
+import Config from 'webpack-5-chain';
 import webpack from 'webpack';
-import HtmlWebpackPlugin from 'html-webpack-plugin'
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import { LoaderOptions, PluginOptions } from 'mini-css-extract-plugin';
 
 interface CopyFileType {
     from: string;
     to: string;
 }
 
-declare module "@fesjs/fes" {
+declare module '@fesjs/fes' {
     interface PluginBuildConfig {
         analyze?: {
             analyzerMode?: 'server' | 'static' | 'disabled';
             analyzerHost?: string;
             analyzerPort?: number | 'auto';
             openAnalyzer?: boolean;
-            generateStatsFile?:  boolean;
+            generateStatsFile?: boolean;
             statsFilename?: string;
             logLevel?: 'info' | 'warn' | 'error' | 'silent';
-            defaultSizes?: 'stat' | 'parsed' | 'gzip'
+            defaultSizes?: 'stat' | 'parsed' | 'gzip';
         };
-        chainWebpack?: (memo: Config, args: {env: string, webpack: typeof webpack}) => void;
+        chainWebpack?: (memo: Config, args: { env: string; webpack: typeof webpack }) => void;
         copy?: CopyFileType | CopyFileType[];
         cssLoader?: {
             url?: boolean | ((url: string, resourcePath: string) => boolean);
-            import?: boolean | ({ filter: (url: string, media: string, resourcePath: string) => boolean });
+            import?: boolean | { filter: (url: string, media: string, resourcePath: string) => boolean };
             modules?: boolean | string | object;
             sourceMap?: boolean;
             importLoaders?: number;
@@ -50,9 +51,13 @@ declare module "@fesjs/fes" {
         html?: HtmlWebpackPlugin.Options;
         lessLoader?: Record<string, any>;
         nodeModulesTransform?: {
-            exclude: string[]
+            exclude: string[];
         };
         postcssLoader?: Record<string, any>;
         vueLoader?: object;
+        extraCSS?: {
+            loader?: LoaderOptions;
+            plugin?: PluginOptions;
+        };
     }
 }

packages/fes-plugin-swc/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fesjs/plugin-swc",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "description": "@fesjs/plugin-swc",
   "main": "lib/index.js",
   "types": "types.d.ts",

packages/fes-template-vite/.fes.local.js

@@ -1,7 +1,7 @@
-import { defineBuildConfig } from "@fesjs/fes";
+import { defineBuildConfig } from '@fesjs/fes';
 
-export default {
+export default defineBuildConfig({
     // define: {
     //     __DEV__: true
     // },
-}
+});

packages/fes-template/.fes.js

@@ -1,7 +1,6 @@
 import { defineBuildConfig } from '@fesjs/fes';
 
 export default defineBuildConfig({
-    swc: false,
     targets: {
         chrome: '78',
     },
@@ -89,5 +88,4 @@ export default defineBuildConfig({
     monacoEditor: {
         languages: ['javascript', 'typescript', 'html', 'json'],
     },
-    presets: [require.resolve('../fes-builder-webpack/lib')],
 });

packages/fes-template/.fes.local.js

@@ -1,5 +1,7 @@
-export default {
+import { defineBuildConfig } from '@fesjs/fes';
+
+export default defineBuildConfig({
     // define: {
     //     __DEV__: true
     // },
-};
+});

packages/fes-template/.fes.prod.js

@@ -1,5 +1,12 @@
-// .fes.js 只负责管理编译时配置，只能使用plain Object
+import path from 'path';
+import { defineBuildConfig } from '@fesjs/fes';
 
-export default {
-    // publicPath: 'https://gw.alipayobjects.com/'
-};
+export default defineBuildConfig({
+    // publicPath: 'https://gw.alipayobjects.com/',
+    // 配置 mini-css-extract-plugin
+    extraCSS: {
+        loader: {
+            publicPath: (resourcePath, context) => `${path.relative(path.dirname(resourcePath), context)}/`,
+        },
+    },
+});

packages/fes-template/package.json

@@ -45,6 +45,7 @@
   },
   "dependencies": {
     "@fesjs/fes": "workspace:*",
+    "@fesjs/builder-webpack": "workspace:*",
     "@fesjs/plugin-login": "workspace:*",
     "@fesjs/plugin-access": "workspace:*",
     "@fesjs/plugin-enums": "workspace:*",

pnpm-lock.yaml

@@ -627,9 +627,6 @@ importers:
       sass-loader:
         specifier: ^11.0.1
         version: 11.0.1(sass@1.32.11)(webpack@5.76.2)
-      webpack:
-        specifier: '>=5.0.0'
-        version: 5.76.2(@swc/core@1.3.49)
 
   packages/fes-plugin-swc:
     dependencies:
@@ -744,6 +741,9 @@ importers:
 
   packages/fes-template:
     dependencies:
+      '@fesjs/builder-webpack':
+        specifier: workspace:*
+        version: link:../fes-builder-webpack
       '@fesjs/fes':
         specifier: workspace:*
         version: link:../fes