ci: change webpack config

build/config.js

@@ -0,0 +1,33 @@
+const path = require('path');
+const fs = require('fs');
+const nodeExternals = require('webpack-node-externals');
+const Components = require('../components.json');
+
+let externals = {};
+
+Object.keys(Components).forEach((key) => {
+  externals[`element-pro-crud/src/component/${key}`] = `element-pro-crud/lib/${key}`;
+});
+
+externals = [
+  Object.assign(
+    {
+      vue: 'vue',
+    },
+    externals,
+  ),
+  nodeExternals(),
+];
+
+exports.externals = externals;
+
+exports.alias = {
+  '@': path.resolve(__dirname, '../src'),
+};
+
+exports.vue = {
+  root: 'Vue',
+  commonjs: 'vue',
+  commonjs2: 'vue',
+  amd: 'vue',
+};

build/webpack.component.js

@@ -0,0 +1,85 @@
+const path = require('path');
+const ProgressBarPlugin = require('progress-bar-webpack-plugin');
+const VueLoaderPlugin = require('vue-loader/lib/plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+const webpack = require('webpack');
+const Components = require('../components.json');
+const config = require('./config');
+const { name, version, author, homepage } = require('../package');
+
+const webpackConfig = {
+  mode: 'production',
+  entry: Components,
+  output: {
+    path: path.resolve(process.cwd(), 'lib'),
+    publicPath: '/dist/',
+    filename: '[name].umd.min.js',
+    chunkFilename: '[id].js',
+    libraryTarget: 'umd',
+  },
+  resolve: {
+    extensions: ['.ts', '.js', '.vue', '.json'],
+    alias: config.alias,
+    modules: ['node_modules'],
+  },
+  // 排除部分依赖不进行打包
+  externals: config.externals,
+  // 允许打包250kb以上的资源
+  performance: {
+    hints: false,
+  },
+  stats: 'none',
+  optimization: {
+    minimize: true,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          compilerOptions: {
+            preserveWhitespace: false,
+          },
+        },
+      },
+      { test: /\.ts?$/, loader: 'ts-loader', exclude: /node_modules/ },
+      {
+        test: /\.(js?|babel|es6)$/,
+        include: process.cwd(),
+        exclude: /node_modules/,
+        loader: 'babel-loader',
+      },
+      {
+        test: /\.(scss|css)$/,
+        loaders: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
+      },
+      {
+        test: /\.(svg|otf|ttf|woff2?|eot|gif|png|jpe?g)(\?\S*)?$/,
+        loader: 'url-loader',
+        query: {
+          limit: 10000,
+          name: path.posix.join('static', '[name].[hash:7].[ext]'),
+        },
+      },
+    ],
+  },
+  plugins: [
+    new VueLoaderPlugin(),
+    new MiniCssExtractPlugin({
+      filename: '[name].css',
+    }),
+    new ProgressBarPlugin(),
+    new BundleAnalyzerPlugin({
+      analyzerMode: 'static',
+    }),
+    new webpack.BannerPlugin({
+      entryOnly: true, // 是否仅在入口包中输出 banner 信息
+      // eslint-disable-next-line no-useless-concat
+      banner: () => `${name} v${version}` + '\n' + `Author: ${author}` + '\n' + `Documentation: ${homepage}` + '\n' + `Date: ${new Date()}`,
+    }),
+  ],
+};
+
+module.exports = webpackConfig;

components.json

@@ -0,0 +1,8 @@
+{
+  "pro-crud":"/src/index.ts",
+  "pro-form": "./src/component/pro-form/index.ts",
+  "pro-table": "./src/component/pro-table/index.ts",
+  "crud-table": "./src/component/crud-table/index.ts",
+  "form-designer": "./src/component/form-designer/index.ts",
+  "table-designer": "./src/component/table-designer/index.ts"
+}

package.json

@@ -34,6 +34,7 @@
     "lint": "vue-cli-service lint",
     "report": "cross-env IS_REPORT=true vue-cli-service build --target lib --name ProCrud --dest lib src/index.ts",
     "lib": "vue-cli-service build --target lib --name ProCrud --dest lib src/index.ts",
+    "webpack": "webpack --config build/webpack.component.js",
     "deploy": "npm run lib && npm publish",
     "log": "conventional-changelog --config ./node_modules/vue-cli-plugin-commitlint/lib/log -i CHANGELOG.md -s -r 0",
     "cz": "npm run log && git add . && git cz"
@@ -50,43 +51,52 @@
     "@vue/eslint-config-typescript": "^5.0.2",
     "axios": "^0.19.2",
     "babel-eslint": "^10.0.2",
+    "babel-plugin-component": "^1.1.1",
     "chai": "^4.2.0",
     "clipboard": "^2.0.1",
     "conventional-changelog-cli": "^2.1.0",
     "core-js": "2.6.5",
     "cross-env": "^7.0.2",
+    "css-loader": "^5.2.1",
     "dayjs": "1.8.20",
     "element-ui": "^2.13.2",
     "eslint": "^6.0.1",
-    "eslint-plugin-import": "^2.18.0",
     "eslint-config-prettier": "^8.1.0",
-    "eslint-plugin-vue": "^5.2.3",
+    "eslint-plugin-import": "^2.18.0",
     "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-vue": "^5.2.3",
     "html-webpack-include-assets-plugin": "^2.0.0",
     "husky": "^3.0.9",
     "inquirer": "^6.5.2",
     "lint-staged": "^9.2.0",
     "longest": "^2.0.1",
+    "mini-css-extract-plugin": "^1.4.1",
     "node-sass": "^4.12.0",
     "path": "^0.12.7",
     "prettier": "^2.2.1",
+    "progress-bar-webpack-plugin": "^2.1.0",
     "right-pad": "^1.0.1",
     "sass-loader": "^7.1.0",
+    "style-loader": "^2.0.0",
     "svg-sprite-loader": "^4.1.6",
     "svgo-loader": "2.2.1",
     "terser-webpack-plugin": "^1.2.4",
+    "ts-loader": "^8.1.0",
     "typescript": "~3.8.3",
     "vue": "2.6.11",
     "vue-awesome": "^3.5.4",
     "vue-class-component": "^7.2.3",
     "vue-cli-plugin-axios": "0.0.4",
     "vue-cli-plugin-commitlint": "^1.0.12",
+    "vue-loader": "^15.9.6",
     "vue-property-decorator": "^8.5.0",
     "vue-router": "3.4.3",
     "vue-template-compiler": "2.6.11",
     "vuedraggable": "^2.23.2",
     "webpack": "^4.35.3",
-    "webpack-bundle-analyzer": "^3.3.2"
+    "webpack-bundle-analyzer": "^3.3.2",
+    "webpack-cli": "^4.6.0",
+    "webpack-node-externals": "^2.5.2"
   },
   "husky": {
     "hooks": {