diff --git a/CHANGELOG.md b/CHANGELOG.md index 01a64cbc..8b5d4070 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/README.md b/README.md index 6fe39339..9ee9999e 100644 --- a/README.md +++ b/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 一样容易 diff --git a/docs/reference/config/index.md b/docs/reference/config/index.md index 733069fe..365402e3 100644 --- a/docs/reference/config/index.md +++ b/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` diff --git a/package.json b/package.json index 3fbbdc00..dee40de6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "fes.js", - "version": "3.0.4", + "version": "3.0.5", "description": "一个好用的前端管理台快速开发框架", "preferGlobal": true, "private": true, diff --git a/packages/fes-builder-webpack/src/index.js b/packages/fes-builder-webpack/src/index.js index e9e1b703..a7864d3c 100644 --- a/packages/fes-builder-webpack/src/index.js +++ b/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'), diff --git a/packages/fes-builder-webpack/src/plugins/commands/build/index.js b/packages/fes-builder-webpack/src/plugins/commands/build/index.js index dc510ea3..c0fc5304 100644 --- a/packages/fes-builder-webpack/src/plugins/commands/build/index.js +++ b/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({ diff --git a/packages/fes-builder-webpack/src/plugins/commands/dev/index.js b/packages/fes-builder-webpack/src/plugins/commands/dev/index.js index a1ceca9c..72a61bfb 100644 --- a/packages/fes-builder-webpack/src/plugins/commands/dev/index.js +++ b/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); diff --git a/packages/fes-builder-webpack/src/plugins/commands/webpack/index.js b/packages/fes-builder-webpack/src/plugins/commands/webpack/index.js index 551ccc49..a92692e0 100644 --- a/packages/fes-builder-webpack/src/plugins/commands/webpack/index.js +++ b/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 }); diff --git a/packages/fes-builder-webpack/src/plugins/commands/buildDevUtils.js b/packages/fes-builder-webpack/src/plugins/common/buildDevUtils.js similarity index 100% rename from packages/fes-builder-webpack/src/plugins/commands/buildDevUtils.js rename to packages/fes-builder-webpack/src/plugins/common/buildDevUtils.js index b19c2ebd..946057ab 100644 --- a/packages/fes-builder-webpack/src/plugins/commands/buildDevUtils.js +++ b/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 }) { diff --git a/packages/fes-builder-webpack/src/plugins/commands/webpackConfig/css.js b/packages/fes-builder-webpack/src/plugins/common/webpackConfig/css.js similarity index 86% rename from packages/fes-builder-webpack/src/plugins/commands/webpackConfig/css.js rename to packages/fes-builder-webpack/src/plugins/common/webpackConfig/css.js index 93e0b4af..5abb1ad7 100644 --- a/packages/fes-builder-webpack/src/plugins/commands/webpackConfig/css.js +++ b/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'), [{}]); } diff --git a/packages/fes-builder-webpack/src/plugins/commands/webpackConfig/define.js b/packages/fes-builder-webpack/src/plugins/common/webpackConfig/define.js similarity index 100% rename from packages/fes-builder-webpack/src/plugins/commands/webpackConfig/define.js rename to packages/fes-builder-webpack/src/plugins/common/webpackConfig/define.js diff --git a/packages/fes-builder-webpack/src/plugins/commands/webpackConfig/getBabelOpts.js b/packages/fes-builder-webpack/src/plugins/common/webpackConfig/getBabelOpts.js similarity index 100% rename from packages/fes-builder-webpack/src/plugins/commands/webpackConfig/getBabelOpts.js rename to packages/fes-builder-webpack/src/plugins/common/webpackConfig/getBabelOpts.js diff --git a/packages/fes-builder-webpack/src/plugins/commands/webpackConfig/html.js b/packages/fes-builder-webpack/src/plugins/common/webpackConfig/html.js similarity index 100% rename from packages/fes-builder-webpack/src/plugins/commands/webpackConfig/html.js rename to packages/fes-builder-webpack/src/plugins/common/webpackConfig/html.js diff --git a/packages/fes-builder-webpack/src/plugins/commands/webpackConfig/index-default.html b/packages/fes-builder-webpack/src/plugins/common/webpackConfig/index-default.html similarity index 100% rename from packages/fes-builder-webpack/src/plugins/commands/webpackConfig/index-default.html rename to packages/fes-builder-webpack/src/plugins/common/webpackConfig/index-default.html diff --git a/packages/fes-builder-webpack/src/plugins/commands/webpackConfig/index.js b/packages/fes-builder-webpack/src/plugins/common/webpackConfig/index.js similarity index 100% rename from packages/fes-builder-webpack/src/plugins/commands/webpackConfig/index.js rename to packages/fes-builder-webpack/src/plugins/common/webpackConfig/index.js diff --git a/packages/fes-builder-webpack/src/plugins/commands/webpackConfig/minimizer.js b/packages/fes-builder-webpack/src/plugins/common/webpackConfig/minimizer.js similarity index 100% rename from packages/fes-builder-webpack/src/plugins/commands/webpackConfig/minimizer.js rename to packages/fes-builder-webpack/src/plugins/common/webpackConfig/minimizer.js diff --git a/packages/fes-builder-webpack/src/plugins/commands/webpackConfig/pitcher.js b/packages/fes-builder-webpack/src/plugins/common/webpackConfig/pitcher.js similarity index 100% rename from packages/fes-builder-webpack/src/plugins/commands/webpackConfig/pitcher.js rename to packages/fes-builder-webpack/src/plugins/common/webpackConfig/pitcher.js diff --git a/packages/fes-builder-webpack/src/plugins/commands/webpackConfig/vue.js b/packages/fes-builder-webpack/src/plugins/common/webpackConfig/vue.js similarity index 100% rename from packages/fes-builder-webpack/src/plugins/commands/webpackConfig/vue.js rename to packages/fes-builder-webpack/src/plugins/common/webpackConfig/vue.js diff --git a/packages/fes-builder-webpack/src/plugins/features/extraCSS.js b/packages/fes-builder-webpack/src/plugins/features/extraCSS.js new file mode 100644 index 00000000..5b1d1c56 --- /dev/null +++ b/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: {}, + }, + }); +}; diff --git a/packages/fes-builder-webpack/types.d.ts b/packages/fes-builder-webpack/types.d.ts index 657e8a6c..88786413 100644 --- a/packages/fes-builder-webpack/types.d.ts +++ b/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; nodeModulesTransform?: { - exclude: string[] + exclude: string[]; }; postcssLoader?: Record; vueLoader?: object; + extraCSS?: { + loader?: LoaderOptions; + plugin?: PluginOptions; + }; } } diff --git a/packages/fes-plugin-swc/package.json b/packages/fes-plugin-swc/package.json index 44158461..ac03fa54 100644 --- a/packages/fes-plugin-swc/package.json +++ b/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", diff --git a/packages/fes-template-vite/.fes.local.js b/packages/fes-template-vite/.fes.local.js index c79e932e..ad88c6cf 100644 --- a/packages/fes-template-vite/.fes.local.js +++ b/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 // }, -} \ No newline at end of file +}); diff --git a/packages/fes-template/.fes.js b/packages/fes-template/.fes.js index 75b7ddd4..3c37a21f 100644 --- a/packages/fes-template/.fes.js +++ b/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')], }); diff --git a/packages/fes-template/.fes.local.js b/packages/fes-template/.fes.local.js index b2d4c3ea..ad88c6cf 100644 --- a/packages/fes-template/.fes.local.js +++ b/packages/fes-template/.fes.local.js @@ -1,5 +1,7 @@ -export default { +import { defineBuildConfig } from '@fesjs/fes'; + +export default defineBuildConfig({ // define: { // __DEV__: true // }, -}; +}); diff --git a/packages/fes-template/.fes.prod.js b/packages/fes-template/.fes.prod.js index 42d8a3c3..25885db2 100644 --- a/packages/fes-template/.fes.prod.js +++ b/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)}/`, + }, + }, +}); diff --git a/packages/fes-template/package.json b/packages/fes-template/package.json index 6d44de8c..52743822 100644 --- a/packages/fes-template/package.json +++ b/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:*", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 001c0fc4..0d39e02c 100644 --- a/pnpm-lock.yaml +++ b/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