add some reposity

backup/webpack.config copy.js

@@ -4,7 +4,7 @@ const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 //const { VueLoaderPlugin } = require('vue-loader/dist/index');
 const { VueLoaderPlugin } = require('vue-loader');
-
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 module.exports={
   entry:{
@@ -12,7 +12,8 @@ module.exports={
   },
   output:{
     filename:"[name].js",
-    path:path.resolve(__dirname,"./dist")
+    path:path.resolve(__dirname,"./dist"),
+    publicPath: '/',  // 默认路径（根据部署环境调整）
   },
   resolve: {
     alias: {
@@ -22,8 +23,22 @@ module.exports={
   module:{
     rules:[
       {
+        test: /\.html  \)/,
+        use: [{
+          loader:'html-loader',
+          options: {
+            sources: {
+              list: [
+                { tag: 'img', attribute: 'src', type: 'src' }
+              ]
+            }
+          }
+        }]
+      },
+      {
         test:/\.css$/i,
-        use:["style-loader","css-loader"],
+        // use:["style-loader","css-loader"],
+        use:[MiniCssExtractPlugin.loader, ,"css-loader"],
       },
      {
       test:/\.vue$/,
@@ -43,7 +58,7 @@ module.exports={
       }
     },
     {
-     test:/\.(png|jpe?g|gif|svg)$/i,
+     test:/\.(png|jpe?g|gif|svg|webp)$/i,
     //  use:[{ 
     //   loader:"file-loader",
     //   options:{
@@ -54,11 +69,12 @@ module.exports={
     //  }]
       type: 'asset/resource',
       generator:{
-        filename: "[name].[ext]",
+        // filename: "[name].[ext]",
+        filename: 'assets/[hash][ext][query]' // 指定输出路径
       }
    },
    {
-      test:/\.(woff2?|eof|ttf)$/i,
+      test:/\.(woff2?|eof|ttf|otf)$/i,
     //  use:[{ 
     //   loader:"file-loader",
     //   options:{
@@ -69,7 +85,8 @@ module.exports={
     //  }]
       type: 'asset/resource',
       generator:{
-        filename: "./font/[name].[ext]",
+        // filename: "./font/[name].[ext]",
+        filename: 'font/[hash][ext][query]'
       }
     },]
   },
@@ -83,6 +100,9 @@ module.exports={
       filename:"index.html",
       chunks:['index'],
     }),
+    new MiniCssExtractPlugin({
+      filename: 'css/[name].[contenthash:8].css' // 指定 CSS 输出路径
+    })
   ],
   // 优化配置（如代码拆分）
   optimization: {

backup/webpack.config.js

@@ -5,10 +5,13 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 //const { VueLoaderPlugin } = require('vue-loader/dist/index');
 const { VueLoaderPlugin } = require('vue-loader');
 
+
 module.exports={
-  entry:"./index.js",
+  entry:{
+    index:"./index.js",
+  },
   output:{
-    filename:"bundle.js",
+    filename:"[name].js",
     path:path.resolve(__dirname,"./dist")
   },
   resolve: {
@@ -20,7 +23,7 @@ module.exports={
     rules:[
       {
         test:/\.css$/i,
-        use:["style-loader","css-loader"]
+        use:["style-loader","css-loader"],
       },
      {
       test:/\.vue$/,
@@ -31,17 +34,69 @@ module.exports={
       // 处理 .js 文件
     {
       test: /\.js$/,
-      loader: 'babel-loader',
-      exclude: /node_modules/
-    }]
+      exclude: /node_modules/,
+      use: {
+        loader: 'babel-loader',
+        options: {
+          presets: ['@babel/preset-env']
+        }
+      }
+    },
+    {
+     test:/\.(png|jpe?g|gif|svg)$/i,
+    //  use:[{ 
+    //   loader:"file-loader",
+    //   options:{
+    //     limit: 512 * 1024,
+    //     name: "[name].[ext]",
+    //     outputPath:"media",
+    //   },
+    //  }]
+      type: 'asset/resource',
+      generator:{
+        filename: "[name].[ext]",
+      }
+   },
+   {
+      test:/\.(woff2?|eof|ttf)$/i,
+    //  use:[{ 
+    //   loader:"file-loader",
+    //   options:{
+    //     limit: 512 * 1024,
+    //     name: "[name].[ext]",
+    //     outputPath:"media",
+    //   },
+    //  }]
+      type: 'asset/resource',
+      generator:{
+        filename: "./font/[name].[ext]",
+      }
+    },]
   },
   plugins:[
     new VueLoaderPlugin(),
     new CleanWebpackPlugin(),
     new HtmlWebpackPlugin({
-      inject:'body',
-      title:"webpack sample ",
-      template:"./index.html"
-    })
-  ]
+      inject:'head',
+      title:"index page ",
+      template:"./index.html",
+      filename:"index.html",
+      chunks:['index'],
+    }),
+  ],
+  // 优化配置（如代码拆分）
+  optimization: {
+    splitChunks: {
+      chunks: 'all',
+      minSize: 20000,
+      cacheGroups: {
+        vendors: {
+          test: /[\\/]node_modules[\\/]/,
+          priority: -10,
+          reuseExistingChunk: true,
+          name: 'vendors'
+        }
+      }
+    }
+  }
 }

webpack.config.js

@@ -4,7 +4,7 @@ const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 //const { VueLoaderPlugin } = require('vue-loader/dist/index');
 const { VueLoaderPlugin } = require('vue-loader');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
 
 module.exports={
   entry:{
@@ -12,8 +12,7 @@ module.exports={
   },
   output:{
     filename:"[name].js",
-    path:path.resolve(__dirname,"./dist"),
-    publicPath: '/',  // 默认路径（根据部署环境调整）
+    path:path.resolve(__dirname,"./dist")
   },
   resolve: {
     alias: {
@@ -23,22 +22,8 @@ module.exports={
   module:{
     rules:[
       {
-        test: /\.html  \)/,
-        use: [{
-          loader:'html-loader',
-          options: {
-            sources: {
-              list: [
-                { tag: 'img', attribute: 'src', type: 'src' }
-              ]
-            }
-          }
-        }]
-      },
-      {
         test:/\.css$/i,
-        // use:["style-loader","css-loader"],
-        use:[MiniCssExtractPlugin.loader, ,"css-loader"],
+        use:["style-loader","css-loader"],
       },
      {
       test:/\.vue$/,
@@ -58,7 +43,7 @@ module.exports={
       }
     },
     {
-     test:/\.(png|jpe?g|gif|svg|webp)$/i,
+     test:/\.(png|jpe?g|gif|svg)$/i,
     //  use:[{ 
     //   loader:"file-loader",
     //   options:{
@@ -69,12 +54,11 @@ module.exports={
     //  }]
       type: 'asset/resource',
       generator:{
-        // filename: "[name].[ext]",
-        filename: 'assets/[hash][ext][query]' // 指定输出路径
+        filename: "[name].[ext]",
       }
    },
    {
-      test:/\.(woff2?|eof|ttf|otf)$/i,
+      test:/\.(woff2?|eof|ttf)$/i,
     //  use:[{ 
     //   loader:"file-loader",
     //   options:{
@@ -85,8 +69,7 @@ module.exports={
     //  }]
       type: 'asset/resource',
       generator:{
-        // filename: "./font/[name].[ext]",
-        filename: 'font/[hash][ext][query]'
+        filename: "./font/[name].[ext]",
       }
     },]
   },
@@ -100,9 +83,6 @@ module.exports={
       filename:"index.html",
       chunks:['index'],
     }),
-    new MiniCssExtractPlugin({
-      filename: 'css/[name].[contenthash:8].css' // 指定 CSS 输出路径
-    })
   ],
   // 优化配置（如代码拆分）
   optimization: {