diff --git a/packages/fes-preset-built-in/package.json b/packages/fes-preset-built-in/package.json
index 977fe07a..550c539f 100644
--- a/packages/fes-preset-built-in/package.json
+++ b/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"
},
diff --git a/packages/fes-preset-built-in/src/index.js b/packages/fes-preset-built-in/src/index.js
index 1f61b798..0280576b 100644
--- a/packages/fes-preset-built-in/src/index.js
+++ b/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'),
diff --git a/packages/fes-preset-built-in/src/plugins/commands/webpack/index.js b/packages/fes-preset-built-in/src/plugins/commands/webpack/index.js
index 013f1e8f..203581f6 100644
--- a/packages/fes-preset-built-in/src/plugins/commands/webpack/index.js
+++ b/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 });
diff --git a/packages/fes-preset-built-in/src/plugins/commands/webpackConfig/css.js b/packages/fes-preset-built-in/src/plugins/commands/webpackConfig/css.js
index 24fd6f67..6d494ad2 100644
--- a/packages/fes-preset-built-in/src/plugins/commands/webpackConfig/css.js
+++ b/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',
diff --git a/packages/fes-preset-built-in/src/plugins/commands/webpackConfig/index.js b/packages/fes-preset-built-in/src/plugins/commands/webpackConfig/index.js
index c837c2cc..3f36cf8b 100644
--- a/packages/fes-preset-built-in/src/plugins/commands/webpackConfig/index.js
+++ b/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')
- .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({
diff --git a/packages/fes-preset-built-in/src/plugins/features/useExtraCSS.js b/packages/fes-preset-built-in/src/plugins/features/useExtraCSS.js
new file mode 100644
index 00000000..174c2a7c
--- /dev/null
+++ b/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
+ }
+ });
+};
diff --git a/packages/fes-template-h5/.fes.js b/packages/fes-template-h5/.fes.js
index 75345982..9c18fdda 100644
--- a/packages/fes-template-h5/.fes.js
+++ b/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'
diff --git a/packages/fes-template-h5/.fes.prod.js b/packages/fes-template-h5/.fes.prod.js
index 0f64aa6a..6377fd5b 100644
--- a/packages/fes-template-h5/.fes.prod.js
+++ b/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
};
diff --git a/packages/fes-template-h5/src/pages/index.vue b/packages/fes-template-h5/src/pages/index.vue
index 5fe4b9ca..08d873fa 100644
--- a/packages/fes-template-h5/src/pages/index.vue
+++ b/packages/fes-template-h5/src/pages/index.vue
@@ -7,6 +7,7 @@
type="smile"
@click="clickIcon"
/>
+ 
@@ -67,6 +68,7 @@ div {
p {
margin: 20px;
}
+ background: url('@/images/male.png');
}
.one-icon {
color: yellow;
diff --git a/yarn.lock b/yarn.lock
index 8810a052..4f36b007 100644
--- a/yarn.lock
+++ b/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"