Browse Source

add some reposity

night-cherry 3 weeks ago
parent
commit
1825512997
2 changed files with 44 additions and 31 deletions
  1. 20 23
      backup/webpack.config copy.js
  2. 24 8
      webpack.config.js

+ 20 - 23
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,8 +12,7 @@ module.exports={
   },
   output:{
     filename:"[name].js",
-    path:path.resolve(__dirname,"./dist"),
-    publicPath: '/',  // 默认路径(根据部署环境调整)
+    path:path.resolve(__dirname,"./dist")
   },
   resolve: {
     alias: {
@@ -24,21 +23,24 @@ module.exports={
     rules:[
       {
         test: /\.html  \)/,
-        use: [{
-          loader:'html-loader',
-          options: {
-            sources: {
-              list: [
-                { tag: 'img', attribute: 'src', type: 'src' }
-              ]
-            }
+        use: [
+          {
+            loader: 'html-loader',
+            options: {  // [!code focus]
+              // 配置 HTML 中资源引用的处理规则
+              sources: { // [!code focus]
+                list: [ // [!code focus]
+                  { tag: 'img', attribute: 'src', type: 'src' }, // 处理 <img src>
+                  { tag: 'a', attribute: 'href', type: 'src' }   // 处理 <a href> // [!code focus]
+                ] // [!code focus]
+              } // [!code focus]
+            } // [!code focus]
           }
-        }]
+        ]
       },
       {
         test:/\.css$/i,
-        // use:["style-loader","css-loader"],
-        use:[MiniCssExtractPlugin.loader, ,"css-loader"],
+        use:["style-loader","css-loader"],
       },
      {
       test:/\.vue$/,
@@ -58,7 +60,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 +71,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 +86,7 @@ module.exports={
     //  }]
       type: 'asset/resource',
       generator:{
-        // filename: "./font/[name].[ext]",
-        filename: 'font/[hash][ext][query]'
+        filename: "./font/[name].[ext]",
       }
     },]
   },
@@ -100,9 +100,6 @@ module.exports={
       filename:"index.html",
       chunks:['index'],
     }),
-    new MiniCssExtractPlugin({
-      filename: 'css/[name].[contenthash:8].css' // 指定 CSS 输出路径
-    })
   ],
   // 优化配置(如代码拆分)
   optimization: {

+ 24 - 8
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:{
@@ -40,7 +40,17 @@ module.exports={
       },
       {
         test:/\.css$/i,
-        use:["style-loader","css-loader"],
+        // use:["style-loader","css-loader"],
+         use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: 'css-loader',
+            options: {
+              // 重点:将 CSS 输出到对应入口的 css 目录
+              outputPath: '[name]/css/'  
+            }
+          }
+        ]
       },
      {
       test:/\.vue$/,
@@ -52,15 +62,17 @@ module.exports={
     {
       test: /\.js$/,
       exclude: /node_modules/,
-      use: {
-        loader: 'babel-loader',
-        options: {
-          presets: ['@babel/preset-env']
+      use: [
+        {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env']
+          }
         }
-      }
+      ]
     },
     {
-     test:/\.(png|jpe?g|gif|svg)$/i,
+     test:/\.(png|jpe?g|gif|svg|webp)$/i,
     //  use:[{ 
     //   loader:"file-loader",
     //   options:{
@@ -100,6 +112,10 @@ module.exports={
       filename:"index.html",
       chunks:['index'],
     }),
+    new MiniCssExtractPlugin({
+      // CSS 输出到对应入口的 css 目录
+      filename: '[name]/css/[name].[contenthash:8].css'  
+    }),
   ],
   // 优化配置(如代码拆分)
   optimization: {