feat: 给使用mini-css-extract-plugin增加开关 (#178)

* feat: 给使用mini-css-extract-plugin增加开关

* fix: add inlineLimit

* fix: useExtraCSS 名称异常

---------

Co-authored-by: winixt <haizekuo@gmail.com>

packages/fes-preset-built-in/package.json

@@ -58,7 +58,7 @@
         "html-webpack-tags-plugin": "^3.0.0",
         "less": "3.9.0",
         "less-loader": "^8.0.0",
-        "mini-css-extract-plugin": "^1.3.5",
+        "mini-css-extract-plugin": "^2.7.5",
         "mockjs": "^1.1.0",
         "postcss": "8.3.0",
         "postcss-flexbugs-fixes": "^5.0.2",
@@ -71,7 +71,7 @@
         "vue-loader": "^16.1.2",
         "webpack": "^5.76.2",
         "webpack-bundle-analyzer": "^4.4.0",
-        "webpack-chain": "^6.5.1",
+        "webpack-5-chain": "^8.0.1",
         "webpack-dev-server": "^3.11.2",
         "webpackbar": "^5.0.0-3"
     },

packages/fes-preset-built-in/src/index.js

@@ -44,6 +44,7 @@ export default function () {
             require.resolve('./plugins/features/terserOptions'),
             require.resolve('./plugins/features/nodeModulesTransform'),
             require.resolve('./plugins/features/vueLoader'),
+            require.resolve('./plugins/features/useExtraCSS'),
 
             // misc
             require.resolve('./plugins/misc/route'),

packages/fes-preset-built-in/src/plugins/commands/webpack/index.js

@@ -21,7 +21,7 @@ export default function (api) {
         async fn({ options }) {
             const assert = require('assert');
             const { getBundleAndConfigs } = require('../buildDevUtils');
-            const { toString } = require('webpack-chain');
+            const { toString } = require('webpack-5-chain');
             const { highlight } = require('cli-highlight');
             const { bundleConfig } = await getBundleAndConfigs({ api });
 

packages/fes-preset-built-in/src/plugins/commands/webpackConfig/css.js

@@ -23,15 +23,14 @@ function createRules({
     styleLoaderOption
 }) {
     function applyLoaders(rule, isCSSModules) {
-        if (isDev) {
+        if (isDev || !config.useExtraCSS) {
             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({
+                .options({});
-                });
         }
 
         rule.use('css-loader')
@@ -110,7 +109,7 @@ export default function createCssWebpackConfig({
         browserslist
     });
 
-    if (!isDev) {
+    if (!isDev && config.useExtraCSS) {
         webpackConfig.plugin('extra-css')
             .use(require.resolve('mini-css-extract-plugin'), [{
                 filename: '[name].[contenthash:8].css',

packages/fes-preset-built-in/src/plugins/commands/webpackConfig/index.js

@@ -1,6 +1,6 @@
 import { join } from 'path';
 import { existsSync } from 'fs';
-import Config from 'webpack-chain';
+import Config from 'webpack-5-chain';
 import webpack from 'webpack';
 import createCssWebpackConfig from './css';
 import getBabelOpts from './getBabelOpts';
@@ -97,7 +97,8 @@ export default async function getConfig({
         .path(absoluteOutput)
         .publicPath(publicPath)
         .filename('[name].[contenthash:8].js')
-        .chunkFilename('[name].[contenthash:8].chunk.js');
+        .chunkFilename('[name].[contenthash:8].chunk.js')
+        .assetModuleFilename('[hash][ext][query]');
 
     // --------------- resolve -----------
     webpackConfig.resolve.extensions.merge(['.mjs', '.js', '.jsx', '.vue', '.ts', '.tsx', '.json', '.wasm']);
@@ -113,48 +114,27 @@ export default async function getConfig({
     webpackConfig.module
         .rule('image')
         .test(/\.(png|jpe?g|gif|webp|ico)(\?.*)?$/)
-        .use('url-loader')
+        .type('asset')
-        .loader(require.resolve('url-loader'))
+        .parser({
-        .options({
+            dataUrlCondition: {
-            limit: config.inlineLimit || 8192,
+                maxSize: config.inlineLimit || 8 * 1024
-            esModule: false,
-            fallback: {
-                loader: require.resolve('file-loader'),
-                options: {
-                    name: 'static/[name].[hash:8].[ext]',
-                    esModule: false
-                }
             }
         });
 
     webpackConfig.module
         .rule('svg')
         .test(/\.(svg)(\?.*)?$/)
-        .use('file-loader')
+        .type('asset/resource');
-        .loader(require.resolve('file-loader'))
-        .options({
-            name: 'static/[name].[hash:8].[ext]',
-            esModule: false
-        });
 
     webpackConfig.module
         .rule('fonts')
         .test(/\.(eot|woff|woff2|ttf)(\?.*)?$/)
-        .use('file-loader')
+        .type('asset/resource');
-        .loader(require.resolve('file-loader'))
-        .options({
-            name: 'static/[name].[hash:8].[ext]',
-            esModule: false
-        });
 
     webpackConfig.module
         .rule('raw')
         .test(/\.(txt|text|md)$/)
-        .use('raw-loader')
+        .type('asset/resource');
-        .loader(require.resolve('raw-loader'))
-        .options({
-            esModule: false
-        });
 
     const { targets, browserslist } = getTargetsAndBrowsersList({ config });
     const babelOpts = await getBabelOpts({

packages/fes-preset-built-in/src/plugins/features/useExtraCSS.js

@@ -0,0 +1,12 @@
+
+export default (api) => {
+    api.describe({
+        key: 'useExtraCSS',
+        config: {
+            schema(joi) {
+                return joi.boolean();
+            },
+            default: true
+        }
+    });
+};

packages/fes-template-h5/.fes.js

@@ -7,7 +7,7 @@ export default {
         // __VUE_OPTIONS_API__: true,
         // __VUE_PROD_DEVTOOLS__: false
     },
-    publicPath: '/',
+    publicPath: './',
     request: {
         base: '/ras-mas',
         dataField: 'result'

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

@@ -4,5 +4,11 @@
 export default {
     request: {
         base: '/api'
-    }
+    },
+    chainWebpack(memo) {
+        memo.output.filename('./static/[name].[contenthash:8].js')
+            .chunkFilename('./static/[name].[contenthash:8].chunk.js')
+            .assetModuleFilename('./static/[hash][ext][query]');
+    },
+    useExtraCSS: false
 };

packages/fes-template-h5/src/pages/index.vue

@@ -7,6 +7,7 @@
             type="smile"
             @click="clickIcon"
         />
+        <img src="@/images/male.png" />
         <HelloWorld />
         <HelloTSX />
         <helloTS />
@@ -67,6 +68,7 @@ div {
     p {
         margin: 20px;
     }
+    background: url('@/images/male.png');
 }
 .one-icon {
     color: yellow;

yarn.lock

@@ -9705,15 +9705,6 @@ min-indent@^1.0.0:
   resolved "https://registry.npmmirror.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
   integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
 
-mini-css-extract-plugin@^1.3.5:
-  version "1.6.2"
-  resolved "https://registry.npmmirror.com/mini-css-extract-plugin/-/mini-css-extract-plugin-1.6.2.tgz#83172b4fd812f8fc4a09d6f6d16f924f53990ca8"
-  integrity sha512-WhDvO3SjGm40oV5y26GjMJYjd2UMqrLAGKy5YS2/3QKJy2F7jgynuHTir/tgUUOiNQu5saXHdc8reo7YuhhT4Q==
-  dependencies:
-    loader-utils "^2.0.0"
-    schema-utils "^3.0.0"
-    webpack-sources "^1.1.0"
-
 mini-css-extract-plugin@^2.4.5:
   version "2.6.1"
   resolved "https://registry.npmmirror.com/mini-css-extract-plugin/-/mini-css-extract-plugin-2.6.1.tgz#9a1251d15f2035c342d99a468ab9da7a0451b71e"
@@ -9721,6 +9712,13 @@ mini-css-extract-plugin@^2.4.5:
   dependencies:
     schema-utils "^4.0.0"
 
+mini-css-extract-plugin@^2.7.5:
+  version "2.7.5"
+  resolved "https://registry.npmmirror.com/mini-css-extract-plugin/-/mini-css-extract-plugin-2.7.5.tgz#afbb344977659ec0f1f6e050c7aea456b121cfc5"
+  integrity sha512-9HaR++0mlgom81s95vvNjxkg52n2b5s//3ZTI1EtzFb98awsLSivs2LMsVqnQ3ay0PVhqWcGNyDaTE961FOcjQ==
+  dependencies:
+    schema-utils "^4.0.0"
+
 minimalistic-assert@^1.0.0:
   version "1.0.1"
   resolved "https://registry.npmmirror.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
@@ -12371,7 +12369,7 @@ sort-keys@^4.0.0:
   dependencies:
     is-plain-obj "^2.0.0"
 
-source-list-map@^2.0.0, source-list-map@^2.0.1:
+source-list-map@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npmmirror.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
   integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==
@@ -13724,6 +13722,14 @@ webidl-conversions@^6.1.0:
   resolved "https://registry.npmmirror.com/webidl-conversions/-/webidl-conversions-6.1.0.tgz#9111b4d7ea80acd40f5270d666621afa78b69514"
   integrity sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w==
 
+webpack-5-chain@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.npmmirror.com/webpack-5-chain/-/webpack-5-chain-8.0.1.tgz#dda9db48c19e4e01e535e84241131bcc777243d8"
+  integrity sha512-Tu1w80WA2Z+X6e7KzGy+cc0A0z+npVJA/fh55q2azMJ030gqz343Kx+yNAstDCeugsepmtDWY2J2IBRW/O+DEA==
+  dependencies:
+    deepmerge "^1.5.2"
+    javascript-stringify "^2.0.1"
+
 webpack-bundle-analyzer@^4.4.0:
   version "4.6.1"
   resolved "https://registry.npmmirror.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.6.1.tgz#bee2ee05f4ba4ed430e4831a319126bb4ed9f5a6"
@@ -13855,14 +13861,6 @@ webpack-merge@^5.8.0:
     clone-deep "^4.0.1"
     wildcard "^2.0.0"
 
-webpack-sources@^1.1.0:
-  version "1.4.3"
-  resolved "https://registry.npmmirror.com/webpack-sources/-/webpack-sources-1.4.3.tgz#eedd8ec0b928fbf1cbfe994e22d2d890f330a933"
-  integrity sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ==
-  dependencies:
-    source-list-map "^2.0.0"
-    source-map "~0.6.1"
-
 webpack-sources@^2.2.0:
   version "2.3.1"
   resolved "https://registry.npmmirror.com/webpack-sources/-/webpack-sources-2.3.1.tgz#570de0af163949fe272233c2cefe1b56f74511fd"