blackteay/fes.js
1
0
Fork 0
mirror of https://github.com/WeBankFinTech/fes.js.git synced 2025-04-05 19:41:57 +08:00
Code Issues Projects Releases Wiki Activity

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

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

* fix: add inlineLimit

* fix: useExtraCSS 名称异常

---------

Co-authored-by: winixt <haizekuo@gmail.com>
This commit is contained in:
听海 2023-03-23 19:13:02 +08:00 committed by GitHub
parent 678d373d33
commit b1649d5ddd
10 changed files with 55 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/fes-preset-built-in/package.json
View File

@ -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"
},

1
packages/fes-preset-built-in/src/index.js
View File

@ -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'),

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

@ -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 });

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

@ -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',

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

@ -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')
.loader(require.resolve('url-loader'))
.options({
limit: config.inlineLimit || 8192,
esModule: false,
fallback: {
loader: require.resolve('file-loader'),
options: {
name: 'static/[name].[hash:8].[ext]',
esModule: false
}
.type('asset')
.parser({
dataUrlCondition: {
maxSize: config.inlineLimit || 8 * 1024
}
});
webpackConfig.module
.rule('svg')
.test(/\.(svg)(\?.*)?$/)
.use('file-loader')
.loader(require.resolve('file-loader'))
.options({
name: 'static/[name].[hash:8].[ext]',
esModule: false
});
.type('asset/resource');
webpackConfig.module
.rule('fonts')
.test(/\.(eot|woff|woff2|ttf)(\?.*)?$/)
.use('file-loader')
.loader(require.resolve('file-loader'))
.options({
name: 'static/[name].[hash:8].[ext]',
esModule: false
});
.type('asset/resource');
webpackConfig.module
.rule('raw')
.test(/\.(txt|text|md)$/)
.use('raw-loader')
.loader(require.resolve('raw-loader'))
.options({
esModule: false
});
.type('asset/resource');
const { targets, browserslist } = getTargetsAndBrowsersList({ config });
const babelOpts = await getBabelOpts({

12
packages/fes-preset-built-in/src/plugins/features/useExtraCSS.js Normal file
View File

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

2
packages/fes-template-h5/.fes.js
View File

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

8
packages/fes-template-h5/.fes.prod.js
View File

@ -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
};

2
packages/fes-template-h5/src/pages/index.vue
View File

@ -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;

34
yarn.lock
View File

@ -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"