打包配置优化

.gitignore

@@ -0,0 +1,30 @@
+# 根目录 .gitignore
+
+# 依赖目录
+node_modules/
+examples/node_modules/  # 显式忽略 examples 下的 node_modules
+
+# 构建产物
+dist/
+packages/dist/
+*.log
+.DS_Store
+
+# 环境文件
+.env
+.env.local
+
+# IDE 配置
+.idea/
+.vscode/
+*.swp
+
+# 调试文件
+debug.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# 其他
+*.tmp
+*.bak

build/webpack.config.js

@@ -1,5 +1,7 @@
 const path = require('path')
-const { VueLoaderPlugin } = require('vue-loader')
+const {
+  VueLoaderPlugin
+} = require('vue-loader')
 
 module.exports = {
   mode: 'production',
@@ -8,17 +10,27 @@ module.exports = {
   },
   output: {
     path: path.resolve(__dirname, '../dist'),
-    filename: '[name].umd.js',
+    filename: 'zhicheng-components.umd.js',
-    library: 'MyComponents',
+    library: 'ZhichengUI',
     libraryTarget: 'umd',
     umdNamedDefine: true,
-    globalObject: 'this'
+    globalObject: `(typeof self !== 'undefined' ? self : this)`
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './packages') // 确保别名指向正确
+    }
   },
   module: {
     rules: [
       {
         test: /\.vue$/,
-        loader: 'vue-loader'
+        loader: 'vue-loader',
+        options: {
+          compilerOptions: {
+            preserveWhitespace: false
+          }
+        }
       },
       {
         test: /\.css$/,
@@ -27,12 +39,39 @@ module.exports = {
       {
         test: /\.scss$/,
         use: ['style-loader', 'css-loader', 'sass-loader']
+      },
+      {
+        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i,
+        use: [{
+          loader: 'url-loader',
+          options: {
+            limit: 4096, // 4KB 以下转为 base64
+            name: 'fonts/[name].[hash:8].[ext]',
+            esModule: false // 避免 __webpack_require__.n 问题
+          }
+        }]
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+        use: [{
+          loader: 'url-loader',
+          options: {
+            limit: 4096,
+            name: 'img/[name].[hash:8].[ext]',
+            esModule: false
+          }
+        }]
       }
     ]
   },
   plugins: [
     new VueLoaderPlugin()
   ],
+  optimization: {
+    splitChunks: {
+      chunks: 'all'
+    }
+  },
   externals: {
     vue: {
       root: 'Vue',

examples/.gitignore

@@ -0,0 +1,13 @@
+# examples/.gitignore
+
+# 开发缓存
+.vuepress/dist/
+.temp/
+.cache/
+
+# 测试报告
+coverage/
+__tests__/__snapshots__/
+
+# 本地调试文件
+.local-*

examples/.npmignore

@@ -0,0 +1,8 @@
+# 忽略文件
+examples/
+node_modules/
+*.log
+*.md
+*.yml
+webpack.config.js
+.gitignore

examples/package.json

@@ -10,7 +10,7 @@
     },
     "dependencies": {
         "core-js": "^3.8.3",
-        "my-vue2-components": "file:../",
+        "my-components": "file:../",
         "vue": "^2.6.14",
         "element-ui": "^2.15.13",
         "vue-loader": "^17.4.2"

examples/src/App.vue

@@ -2,7 +2,7 @@
     <div id="app" class="demo-container">
       <!-- 按钮组件示例 -->
       <section class="demo-section">
-        <h2>按钮组件</h2>
+        <h2>按钮组件集合</h2>
         <div class="flex">
           <GuipButton type="ignore">哈哈</GuipButton>
           <GuipButton size="big">哈哈</GuipButton>

package.json

@@ -1,8 +1,12 @@
 {
-  "name": "zhicheng-components",
+  "name": "@zhicheng1012/zhicheng-components",
   "version": "1.0.0",
   "description": "A Vue 2 component library",
   "main": "dist/zhicheng-components.umd.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
   "module": "dist/zhicheng-components.esm.js",
   "files": [
     "dist",
@@ -12,27 +16,29 @@
     "build": "webpack --config build/webpack.config.js",
     "serve": "cd examples && npm run serve",
     "lint": "eslint --ext .js,.vue packages",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "release": "npm version patch && npm publish"
   },
   "devDependencies": {
-    "webpack": "~4.46.0",
+    "babel-eslint": "~10.1.0",
-    "webpack-cli": "~4.10.0",
-    "style-loader": "~2.0.0",
     "css-loader": "~5.2.7",
-    
-    "vue-loader": "~15.9.8",
-    "vue-template-compiler": "~2.6.14",
-    
     "eslint": "~6.8.0",
     "eslint-plugin-vue": "~6.2.2",
-    "babel-eslint": "~10.1.0",
+    "file-loader": "^6.2.0",
-    
+    "sass": "^1.89.2",
     "sass-loader": "~10.2.0",
-    "node-sass": "~6.0.1"
+    "style-loader": "~2.0.0",
+    "url-loader": "^4.1.1",
+    "vue": "^2.6.14",
+    "vue-loader": "^15.9.8",
+    "vue-svg-loader": "^0.16.0",
+    "vue-template-compiler": "^2.6.14",
+    "webpack": "~4.46.0",
+    "webpack-cli": "~4.10.0"
   },
   "peerDependencies": {
-    "vue": "^2.6.14",
+    "element-ui": "^2.15.14",
-    "element-ui": "^2.15.14"
+    "vue": "^2.6.14"
   },
   "browserslist": [
     "> 1%",

packages/assets/radio_checked.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="14" height="14" viewBox="0 0 14 14"><g><g><rect x="0" y="0" width="14" height="14" rx="7" fill="#FFFFFF" fill-opacity="1"/><rect x="0.5" y="0.5" width="13" height="13" rx="6.5" fill-opacity="0" stroke-opacity="1" stroke="#006AFF" fill="none" stroke-width="1"/></g><g><rect x="2.380126953125" y="2.3798828125" width="9.239999771118164" height="9.239999771118164" rx="4.619999885559082" fill="#006AFF" fill-opacity="1"/><rect x="2.710126966238022" y="2.709882825613022" width="8.57999974489212" height="8.57999974489212" rx="4.28999987244606" fill-opacity="0" stroke-opacity="1" stroke="#006AFF" fill="none" stroke-width="0.6600000262260437"/></g></g></svg>

packages/assets/require.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="8" height="8" viewBox="0 0 8 8"><g><g><path d="M4.53619,3.49598C4.93756,3.30242,5.33495,3.10073,5.72813,2.89102C6.10411,2.68903,6.40809,2.53804,6.63208,2.44504C6.85606,2.35305,7.03205,2.30305,7.16805,2.30305C7.39203,2.30305,7.58402,2.37805,7.75201,2.53804C7.912,2.69803,8,2.89102,8,3.126C8,3.26099,7.96,3.40299,7.88001,3.54598C7.80001,3.68897,7.71202,3.78196,7.62402,3.82396C6.80007,4.16794,5.88012,4.41992,4.88817,4.57091C5.07216,4.7389,5.28815,4.97489,5.55214,5.26887C5.81612,5.56285,5.95211,5.71384,5.96811,5.73884C6.06411,5.88183,6.2001,6.05882,6.37609,6.26881C6.55208,6.4788,6.67207,6.63879,6.73607,6.75578C6.80007,6.87377,6.84006,7.01576,6.84006,7.18475C6.84107,7.39587,6.75753,7.5986,6.60808,7.74772C6.45193,7.91074,6.23371,7.99948,6.00811,7.9917C5.76812,7.9917,5.48814,7.78972,5.18416,7.39474C4.88017,7.00776,4.4802,6.29481,4.00022,5.26087C3.51225,6.18481,3.18427,6.80678,3.02428,7.10076C2.85629,7.39474,2.69629,7.62073,2.5443,7.77272C2.40703,7.91778,2.21605,7.99989,2.01633,7.9997C1.79003,8.00605,1.5728,7.91065,1.42436,7.73972C1.28036,7.59025,1.19759,7.39224,1.19238,7.18475C1.19238,6.99976,1.22438,6.86477,1.28837,6.77278C1.88034,5.93283,2.49631,5.19288,3.13627,4.57991C2.65244,4.50186,2.17205,4.40378,1.69635,4.28593C1.23363,4.16226,0.781541,4.00176,0.344425,3.80596C0.264429,3.76496,0.192433,3.67197,0.120437,3.52898C0.0420906,3.41216,0.00031659,3.27466,0.000443602,3.134C-0.00716869,2.91112,0.0835016,2.69615,0.24843,2.54604C0.397403,2.39297,0.602823,2.30798,0.816398,2.31105C0.96839,2.31105,1.16038,2.36105,1.39237,2.45404C1.62435,2.55404,1.91234,2.68903,2.27232,2.88202C2.6323,3.06701,3.03228,3.27699,3.48825,3.50398C3.40825,3.07601,3.33626,2.58804,3.28026,2.04207C3.22427,1.4961,3.20027,1.11813,3.20027,0.916139C3.20027,0.664155,3.27226,0.454168,3.42425,0.277179C3.5641,0.0976285,3.7807,-0.00510704,4.00822,0.000195663C4.24021,0.000195663,4.4322,0.09219,4.58419,0.269179C4.73618,0.454168,4.80818,0.689153,4.80818,0.983135C4.80818,1.06713,4.79218,1.22712,4.77618,1.46311C4.76018,1.70609,4.72018,1.99207,4.68018,2.32805C4.63219,2.67203,4.58419,3.05801,4.53619,3.49598Z" fill="#FF4D4F" fill-opacity="1"/></g></g></svg>

packages/styles/common.scss

@@ -174,14 +174,14 @@ body {
     div {
         width: 16px;
         height: 16px;
-        // background-image: url(../../assets/addIcon.svg);
+        background-image: url(../assets/addIcon.svg);
         margin-right: 12px;
     }
 
     &:hover {
         transition: all .3s;
         div {
-            // background-image: url(../../assets/addIcon_light.svg);
+            background-image: url(../assets/addIcon_light.svg);
         }
 
         border-color: #006AFF;
@@ -523,7 +523,7 @@ body {
     /* 清空默认的伪元素内容 */
     width: 14px;
     height: 14px;
-    // background-image: url('../../assets/radio_checked.svg');
+    background-image: url('../assets/radio_checked.svg');
     /* 使用你的自定义图标 */
     background-size: contain;
     background-repeat: no-repeat;
@@ -672,9 +672,9 @@ body {
 
 .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label::after,
 .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label::after {
-    // content: url(../../assets/require.svg);
+    content: url(../assets/require.svg);
     display: inline-block;
-    // background-image: url(../../assets/require.svg);
+    background-image: url(../assets/require.svg);
     color: #ff4d4f;
     margin-right: 4px;
     margin-left: 4px;

packages/styles/index.css

@@ -140,7 +140,7 @@
     font-family: element-icons;
     /* src: url('~element-ui/lib/theme-chalk/fonts/element-icons.woff') format('woff'),
     url('~element-ui/lib/theme-chalk/fonts/element-icons.ttf') format('truetype'); */
-    src: url("fonts/element-icons.woff") format("woff"), url("fonts/element-icons.ttf") format("truetype");
+    src: url("./fonts/element-icons.woff") format("woff"), url("./fonts/element-icons.ttf") format("truetype");
     font-weight: 400;
     font-display: "auto";
     font-style: normal

webpack.config.js

@@ -1 +0,0 @@
-build/webpack.config.js