Browse Source

KERNEL-14316 fix: webpack 打包配置

es6
Treecat 2 years ago
parent
commit
3b1fb7ca20
  1. 7
      package.json
  2. 13
      packages/fineui/package.json
  3. 2
      packages/fineui/ui/less/app.less
  4. 2
      packages/fineui/ui/less/background.less
  5. 2
      packages/fineui/ui/less/font.less
  6. 5
      packages/fineui/ui/less/icon.less
  7. 5
      packages/fineui/ui/less/var.less
  8. 91
      packages/fineui/webpack.prod.js
  9. 265
      packages/fineui/webpack/attachments.js
  10. 16
      packages/fineui/webpack/dirs.js
  11. 24
      packages/fineui/webpack/utils.js
  12. 90
      packages/fineui/webpack/webpack.common.js
  13. 11
      packages/fineui/webpack/webpack.css.js
  14. 59
      packages/fineui/webpack/webpack.prod.js

7
package.json

@ -19,7 +19,9 @@
"autoprefixer": "^10.4.14", "autoprefixer": "^10.4.14",
"babel-loader": "^9.1.2", "babel-loader": "^9.1.2",
"babel-plugin-module-resolver": "^5.0.0", "babel-plugin-module-resolver": "^5.0.0",
"circular-dependency-plugin": "^5.2.2",
"css-loader": "^6.7.3", "css-loader": "^6.7.3",
"css-minimizer-webpack-plugin": "^5.0.0",
"fork-ts-checker-webpack-plugin": "^8.0.0", "fork-ts-checker-webpack-plugin": "^8.0.0",
"html-webpack-plugin": "^5.5.0", "html-webpack-plugin": "^5.5.0",
"less": "^4.1.3", "less": "^4.1.3",
@ -28,6 +30,7 @@
"npm-run-all": "^4.1.5", "npm-run-all": "^4.1.5",
"optimize-css-assets-webpack-plugin": "^6.0.1", "optimize-css-assets-webpack-plugin": "^6.0.1",
"postcss": "^8.4.21", "postcss": "^8.4.21",
"postcss-loader": "^7.1.0",
"style-loader": "^3.3.1", "style-loader": "^3.3.1",
"terser-webpack-plugin": "^5.3.7", "terser-webpack-plugin": "^5.3.7",
"typescript": "^4.9.5", "typescript": "^4.9.5",
@ -35,7 +38,7 @@
"webpack": "^5.75.0", "webpack": "^5.75.0",
"webpack-bundle-analyzer": "^4.8.0", "webpack-bundle-analyzer": "^4.8.0",
"webpack-cli": "^5.0.1", "webpack-cli": "^5.0.1",
"circular-dependency-plugin": "^5.2.2", "webpack-dev-server": "^4.11.1",
"webpack-dev-server": "^4.11.1" "webpack-merge": "^5.8.0"
} }
} }

13
packages/fineui/package.json

@ -1,6 +1,6 @@
{ {
"name": "@fui/core", "name": "@fui/core",
"version": "2.0.20230208163847", "version": "2.0.20230208163847",
"description": "fineui", "description": "fineui",
"main": "dist/fineui_without_conflict.min.js", "main": "dist/fineui_without_conflict.min.js",
"module": "dist/es/index.js", "module": "dist/es/index.js",
@ -9,6 +9,7 @@
"fui-cli": "./bin/cli/cli.js" "fui-cli": "./bin/cli/cli.js"
}, },
"sideEffects": [ "sideEffects": [
"**/*.less",
"src/**/*.js", "src/**/*.js",
"dist/es/core/*.js", "dist/es/core/*.js",
"dist/es/core/element/**/*.js", "dist/es/core/element/**/*.js",
@ -19,7 +20,10 @@
], ],
"scripts": { "scripts": {
"dev": "babel src -d dist/es --config-file ./esm.babel.js -w", "dev": "babel src -d dist/es --config-file ./esm.babel.js -w",
"build": "webpack --config=webpack.prod.js" "build": "webpack --config=webpack/webpack.prod.js",
"webpack:css": "webpack --config=webpack/webpack.css.js --mode production",
"biCss": "cross-env LESS_CONFIG_PATH=lessconfig/bi.lessconfig.json LESS_FILE_NAME=bi npm run webpack:css",
"jsyCss": "cross-env LESS_CONFIG_PATH=lessconfig/jsy.lessconfig.json LESS_FILE_NAME=jsy npm run webpack:css"
}, },
"repository": { "repository": {
"type": "git", "type": "git",
@ -40,7 +44,12 @@
"@juggle/resize-observer": "^3.4.0", "@juggle/resize-observer": "^3.4.0",
"@popperjs/core": "2.11.6", "@popperjs/core": "2.11.6",
"@types/yargs": "17.0.13", "@types/yargs": "17.0.13",
"glob": "^9.3.4",
"jquery": "3.6.3", "jquery": "3.6.3",
"yargs": "17.6.2" "yargs": "17.6.2"
},
"devDependencies": {
"cross-env": "^7.0.3",
"cssnano": "^6.0.0"
} }
} }

2
packages/fineui/ui/less/app.less

@ -0,0 +1,2 @@
@import "../../src/less/resource/app.less";
@import "var.less";

2
packages/fineui/ui/less/background.less

@ -0,0 +1,2 @@
@import "../../src/less/resource/background.less";
@import "var.less";

2
packages/fineui/ui/less/font.less

@ -0,0 +1,2 @@
@import "../../src/less/resource/font.less";
@import "var.less";

5
packages/fineui/ui/less/icon.less

@ -0,0 +1,5 @@
@import "../../src/less/resource/icon.less";
@import "var.less";

5
packages/fineui/ui/less/var.less

@ -0,0 +1,5 @@
@webUrl: 'resources?path=/com/fr/web/ui/';
@fontUrl: '@{webUrl}font/'; //图片的基本地址
@imageUrl: '@{webUrl}images/1x/'; //图片的基本地址
@image2xUrl: '@{webUrl}images/2x/'; //2倍图片的基本地址

91
packages/fineui/webpack.prod.js

@ -1,91 +0,0 @@
const webpack = require("webpack");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const path = require("path");
const autoprefixer = require("autoprefixer");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const CircularDependencyPlugin = require("circular-dependency-plugin");
const childProcess = require("child_process");
function git(command) {
return childProcess.execSync(`git ${command}`).toString().trim();
}
let lessVariables = {};
if (process.env.LESS_CONFIG_PATH) {
const lessConfigPath = path.isAbsolute(process.env.LESS_CONFIG_PATH)
? process.env.LESS_CONFIG_PATH
: path.resolve(__dirname, "lessconfig", process.env.LESS_CONFIG_PATH);
lessVariables = fs.existsSync(lessConfigPath) ? require(lessConfigPath) || {} : {};
}
module.exports = {
mode: "production",
entry: {
"fineui.min": "./src/bundle.js",
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name].js",
},
devtool: "hidden-source-map",
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
},
},
{
test: /\.(css|less)$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
url: false,
},
},
{
loader: "postcss-loader",
options: {
plugins: [autoprefixer],
},
},
{
loader: "less-loader",
options: {
relativeUrls: false,
modifyVars: lessVariables,
},
},
],
},
],
},
resolve: {
extensions: [".js", ".ts"],
alias: {
"@": path.resolve(__dirname, "src"),
},
},
plugins: [new CircularDependencyPlugin()],
optimization: {
usedExports: false,
minimize: true,
minimizer: [
new TerserPlugin({
include: /\.js$/i,
}),
new webpack.BannerPlugin({
banner: `time: ${new Date().toLocaleString()}; branch: ${git(
"name-rev --name-only HEAD"
)} commit: ${git("rev-parse HEAD")}`,
}),
],
},
};

265
packages/fineui/webpack/attachments.js

@ -0,0 +1,265 @@
const { sync, uniq } = require("./utils");
const fixJs = "./dist/fix/fix.js";
const fixProxyJs = './dist/fix/fix.proxy.js';
const fixCompact = "./dist/fix/fix.compact.js";
const workerCompact = './dist/fix/worker.compact.js';
const lodashJs = "src/core/1.lodash.js";
const jqueryJs = "src/core/platform/web/jquery/_jquery.js";
const runtimePolyfill = ["core-js/stable"];
const basicAttachmentMap = {
polyfill: sync([
"src/core/0.foundation.js",
"src/polyfill/**/*.js",
]).concat(runtimePolyfill),
core: sync([
"src/less/core/**/*.less",
"src/less/theme/**/*.less",
// lodashJs,
// jqueryJs,
// "src/core/**/*.js",
// "src/data/**/*.js",
]),
// 最基础的控件
base: sync([
"src/less/base/**/*.less",
// "src/third/**/*.js",
// "src/base/**/*.js",
]),
// 实现好的一些基础实例
case: sync([
// "src/case/**/*.js",
"src/less/case/**/*.less",
]),
widget: sync([
"src/less/widget/**/*.less",
"src/less/component/**/*.less",
// "src/widget/**/*.js",
// "src/component/**/*.js",
]),
router: sync([
"src/router/**/*.js",
]),
core_without_platform: sync([
"src/core/0.foundation.js",
lodashJs,
"src/core/**/*.js",
"src/data/**/*.js",
], [
"src/core/platform/**/*.js",
"src/core/controller/**/*.js",
]),
core_without_normalize: sync(
["src/less/core/**/*.less", "src/less/theme/**/*.less"], ["src/less/core/normalize.less", "src/less/core/normalize2.less"]
),
core_without_conflict: sync([
"src/less/core/**/*.less",
"src/less/theme/**/*.less",
lodashJs,
"src/core/**/*.js",
"src/data/**/*.js",
], [
"src/core/conflict.js",
]),
resource: sync(["src/less/resource/**/*.less"]),
font: sync(["public/less/font.less"]),
ts: ['./typescript/bundle.ts'],
ui: sync([
'ui/less/app.less',
'ui/less/**/*.less',
'ui/js/**/*.js',
]),
config: sync(["demo/version.js", "i18n/i18n.cn.js"]),
utils: sync([
"src/core/0.foundation.js",
lodashJs,
"src/core/constant/**/*.js",
"src/core/func/**/*.js",
"src/core/2.base.js",
"src/core/3.ob.js",
"src/core/5.inject.js",
"src/core/utils/*.js",
"i18n/i18n.cn.js",
"_mobile/date.i18n.cn.js",
"src/data/**/*.js",
]),
fix: [fixJs],
fixProxy: [fixProxyJs],
less: sync([
"src/less/core/**/*.less",
"src/less/theme/**/*.less",
"src/less/base/**/*.less",
"src/less/case/**/*.less",
"src/less/widget/**/*.less",
"src/less/component/**/*.less",
]),
js_bundle: sync(["src/bundle.js"])
};
const bundle = [].concat(
basicAttachmentMap.polyfill,
basicAttachmentMap.core,
basicAttachmentMap.fix,
basicAttachmentMap.base,
basicAttachmentMap.case,
basicAttachmentMap.widget,
sync(["public/less/app.less", "public/less/**/*.less"]),
[fixCompact, workerCompact],
basicAttachmentMap.router,
sync(["public/js/**/*.js", "public/js/index.js", "i18n/i18n.cn.js"]),
basicAttachmentMap.ts,
);
const bundleCss = [].concat(
basicAttachmentMap.less,
sync(["public/less/app.less", "public/less/**/*.less"]),
);
// const bundleModern = [].concat(
// sync(["src/less/modern.less"]),
// sync(["public/modern/app.less", "public/modern/**/*.less"]),
// );
const coreJs = [].concat(
basicAttachmentMap.polyfill,
basicAttachmentMap.core,
basicAttachmentMap.fix,
basicAttachmentMap.base,
basicAttachmentMap.case,
basicAttachmentMap.widget,
['./dist/fix/fix.compact.js'],
basicAttachmentMap.router,
basicAttachmentMap.ts,
);
const resource = sync(["private/less/app.less", "private/less/**/*.less"]);
const config = sync(["public/js/**/*.js", "public/js/index.js", "i18n/i18n.cn.js"]);
const bundleWithoutNormalize = [].concat(
basicAttachmentMap.core_without_normalize,
sync([
"src/less/base/**/*.less",
"src/less/case/**/*.less",
"src/less/widget/**/*.less",
"src/less/component/**/*.less",
"public/less/**/*.less",
// ts的less
], [
"public/less/app.less",
]),
);
const fineuiWithoutNormalize = [].concat(
basicAttachmentMap.core_without_normalize,
sync([
"src/less/base/**/*.less",
"src/less/case/**/*.less",
"src/less/widget/**/*.less",
"src/less/component/**/*.less",
'ui/less/app.less',
'ui/less/**/*.less',
]),
);
const fineui = [].concat(
bundleCss,
basicAttachmentMap.js_bundle,
basicAttachmentMap.ui,
// basicAttachmentMap.ts,
);
const fineuiWithoutConflict = [].concat(
basicAttachmentMap.polyfill,
basicAttachmentMap.core_without_conflict,
basicAttachmentMap.fix,
basicAttachmentMap.base,
basicAttachmentMap.case,
basicAttachmentMap.widget,
basicAttachmentMap.router,
[fixCompact, workerCompact],
basicAttachmentMap.ui,
basicAttachmentMap.ts,
);
// const fineuiModern = [].concat(
// sync(["src/less/modern.less"]),
// sync([
// 'ui/modern/app.less',
// 'ui/modern/**/*.less',
// ]),
// );
const fineuiProxy = [].concat(
basicAttachmentMap.polyfill,
basicAttachmentMap.core,
basicAttachmentMap.fixProxy,
basicAttachmentMap.base,
basicAttachmentMap.case,
basicAttachmentMap.widget,
basicAttachmentMap.router,
[fixCompact, workerCompact],
basicAttachmentMap.ui,
basicAttachmentMap.ts,
);
const fineuiWithoutJqueryAndPolyfillJs = [].concat(
runtimePolyfill,
sync([
"src/core/0.foundation.js",
lodashJs,
"src/core/**/*.js",
"src/data/**/*.js",
], [
"src/core/platform/web/**/*.js",
]),
basicAttachmentMap.fix,
sync([
"src/base/**/*.js",
"src/case/**/*.js",
], [
"src/base/single/input/file.js",
"src/case/ztree/**/*.js",
]),
basicAttachmentMap.widget,
sync([fixCompact, workerCompact, "ui/js/**/*.js"]),
basicAttachmentMap.ts,
);
const demo = [].concat(
basicAttachmentMap.polyfill,
basicAttachmentMap.core,
basicAttachmentMap.fix,
basicAttachmentMap.config,
basicAttachmentMap.base,
basicAttachmentMap.case,
basicAttachmentMap.widget,
basicAttachmentMap.router,
sync(["public/less/app.less", "public/less/**/*.less"]),
[fixCompact, workerCompact],
basicAttachmentMap.ts,
sync(["demo/less/*.less", "demo/less/**/*.less", "demo/app.js", "demo/js/**/*.js", "demo/config.js"]),
);
module.exports = {
fix: fixJs,
fixProxy: fixProxyJs,
lodash: lodashJs,
font: basicAttachmentMap.font,
bundle: uniq(bundle),
fineuiWithoutNormalize: uniq(fineuiWithoutNormalize),
fineuiWithoutConflict: uniq(fineuiWithoutConflict),
bundleWithoutNormalize: uniq(bundleWithoutNormalize),
fineui: uniq(fineui),
fineuiProxy: uniq(fineuiProxy),
fineuiWithoutJqueryAndPolyfillJs: uniq(fineuiWithoutJqueryAndPolyfillJs),
utils: uniq(basicAttachmentMap.utils),
demo: uniq(demo),
coreWithoutPlatform: uniq(basicAttachmentMap.core_without_platform),
coreJs: uniq(coreJs),
resource: uniq((resource)),
config: uniq(config),
bundleCss: uniq(bundleCss),
};

16
packages/fineui/webpack/dirs.js

@ -0,0 +1,16 @@
const path = require("path");
module.exports = {
DEST: path.resolve(__dirname, "../dist"),
NODE_MODULES: path.resolve(__dirname, "../node_modules"),
PRIVATE: path.resolve(__dirname, "../private"),
BABEL_CONFIG: path.resolve(__dirname, "../babel.config.js"),
TYPESCRIPT: path.resolve(__dirname, "../typescript"),
ROUTER: path.resolve(__dirname, "../src/router"),
SRC: path.resolve(__dirname, "../src"),
DEMO: path.resolve(__dirname, "../demo"),
PUBLIC: path.resolve(__dirname, "../public"),
I18N: path.resolve(__dirname, "../i18n"),
UI: path.resolve(__dirname, "../ui"),
MOBILE: path.resolve(__dirname, "../_mobile"),
FIX: path.resolve(__dirname, "../dist/fix"),
};

24
packages/fineui/webpack/utils.js

@ -0,0 +1,24 @@
const path = require('path');
const glob = require('glob');
// const glob = require('fast-glob');
function uniq(names) {
return [...new Set(names)];
}
const globalExcludes = [
"**/*/__test__/*.js",
];
function sync(patterns, excludes = []) {
const ignore = globalExcludes.concat(excludes).map(pattern => path.join(__dirname, "../", pattern).replace(/\\/g, '/'));
return patterns.map(pattern => glob.sync(path.join(__dirname, "../", pattern).replace(/\\/g, '/'), { ignore })).flat();
}
module.exports = {
sync,
uniq,
};

90
packages/fineui/webpack/webpack.common.js

@ -0,0 +1,90 @@
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const autoprefixer = require("autoprefixer");
const path = require("path");
const fs = require("fs");
const dirs = require("./dirs");
const attachments = require("./attachments");
let lessVariables = {};
if (process.env.LESS_CONFIG_PATH) {
const lessConfigPath = path.isAbsolute(process.env.LESS_CONFIG_PATH)
? process.env.LESS_CONFIG_PATH
: path.resolve(__dirname, "lessconfig", process.env.LESS_CONFIG_PATH);
lessVariables = fs.existsSync(lessConfigPath) ? require(lessConfigPath) || {} : {};
}
module.exports = {
entry: {
fineui: attachments.fineui,
},
externals: {
lodash: "_",
underscore: "_",
},
resolve: {
mainFields: ["module", "main"],
extensions: [".js", ".ts"],
alias: {
"@": path.resolve(__dirname, "../src"),
},
},
module: {
rules: [
{
test: /\.(jsx?|tsx?)$/i,
include: [
dirs.NODE_MODULES,
dirs.PRIVATE,
dirs.PUBLIC,
dirs.MOBILE,
dirs.DEMO,
dirs.I18N,
dirs.UI,
dirs.FIX,
dirs.TYPESCRIPT,
dirs.SRC,
],
exclude: /node_modules(\/|\\)core-js/,
use: [
{
loader: "babel-loader",
options: {
configFile: dirs.BABEL_CONFIG,
},
},
],
},
{
test: /\.(css|less)$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
url: false,
},
},
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [autoprefixer],
},
},
},
{
loader: "less-loader",
options: {
lessOptions: {
relativeUrls: false,
modifyVars: lessVariables,
},
},
},
],
},
],
},
};

11
packages/fineui/webpack/webpack.css.js

@ -0,0 +1,11 @@
const { merge } = require("webpack-merge");
const prod = require("./webpack.prod.js");
const attachments = require("./attachments");
prod.entry = {};
module.exports = merge(prod, {
mode: "production",
entry: {
[`${process.env.LESS_FILE_NAME}.min`]: attachments.bundleCss,
},
});

59
packages/fineui/webpack/webpack.prod.js

@ -0,0 +1,59 @@
const webpack = require("webpack");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
const common = require("./webpack.common.js");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const childProcess = require("child_process");
const { merge } = require("webpack-merge");
const dirs = require("./dirs");
const attachments = require("./attachments");
function git(command) {
return childProcess.execSync(`git ${command}`).toString().trim();
}
module.exports = merge(common, {
mode: "production",
entry: {
"fineui.min": attachments.fineui
},
output: {
path: dirs.DEST,
filename: "[name].js",
},
devtool: "hidden-source-map",
optimization: {
usedExports: false,
minimize: true,
minimizer: [
new TerserPlugin({
include: /\.min/,
parallel: true,
terserOptions: {
output: {
comments: false,
},
},
}),
new webpack.BannerPlugin({
banner: `time: ${new Date().toLocaleString()}; branch: ${git(
"name-rev --name-only HEAD"
)} commit: ${git("rev-parse HEAD")}`,
}),
new CssMinimizerPlugin(),
],
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
}),
new ForkTsCheckerWebpackPlugin({}),
],
});
Loading…
Cancel
Save