feat: mini-css-extract-plugin支持配置 (#190)

docs/reference/config/README.md

@@ -118,6 +118,7 @@ export default {
 
     路由是否按需加载
 
+
 ### inlineLimit
 
 -   类型： `number`
@@ -399,6 +400,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`

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');
+import path from 'path';
-const fs = require('fs');
+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,12 +91,15 @@ 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'), [
+            Object.assign(
                 {
                     filename: 'static/[name].[contenthash:8].css',
                     chunkFilename: 'static/[id].[contenthash:8].css',
                 },
+                config.extraCSS?.plugin ?? {},
+            ),
         ]);
         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,6 +1,7 @@
 import Config from 'webpack-5-chain'
 import webpack from 'webpack';
 import HtmlWebpackPlugin from 'html-webpack-plugin'
+import { LoaderOptions, PluginOptions } from 'mini-css-extract-plugin'
 
 interface CopyFileType {
     from: string;
@@ -54,5 +55,9 @@ declare module "@fesjs/fes" {
         };
         postcssLoader?: Record<string, any>;
         vueLoader?: object;
+        extraCSS?: {
+            loader?: LoaderOptions,
+            plugin?: PluginOptions
+        };
     }
 }

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

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