feat: webpack配置使用

build/move-md-plugin.ts

@@ -24,12 +24,21 @@ const moveMarkdownFiles = (dir: string) => {
                 console.log(`自定义vite插件，复制 ${filePath} 到 ${distPath}（新增）`);
             } else {
                 // 比较文件大小
-                const sourceFileSize = stat.size;
+                // const sourceFileSize = stat.size;
-                const distFileSize = fs.statSync(distPath).size;
+                // const distFileSize = fs.statSync(distPath).size;
 
-                if (sourceFileSize !== distFileSize) {
+                // if (sourceFileSize !== distFileSize) {
+                //     fs.copyFileSync(filePath, distPath);
+                //     console.log(`自定义vite插件，复制 ${filePath} 到 ${distPath}（文件大小不一致）`);
+                // }
+
+                // 读取源文件和目标文件的内容
+                const sourceFileContent = fs.readFileSync(filePath, 'utf-8');
+                const distFileContent = fs.readFileSync(distPath, 'utf-8');
+
+                if (sourceFileContent !== distFileContent) {
                     fs.copyFileSync(filePath, distPath);
-                    console.log(`自定义vite插件，复制 ${filePath} 到 ${distPath}（文件大小不一致）`);
+                    console.log(`自定义vite插件，复制 ${filePath} 到 ${distPath}（文件内容不一致）`);
                 }
             }
         }

src/views/demo/webpack/index.vue

@@ -0,0 +1,17 @@
+<template>
+    <div
+        class="markdown-body"
+        v-html="htmlStr"
+    ></div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { marked } from 'marked';
+import { getMarkdownContent } from '@/utils/tools';
+
+const htmlStr = ref('');
+getMarkdownContent('./md/webpack.md').then((res) => {
+    htmlStr.value = marked(res);
+});
+</script>

src/views/demo/webpack/webpack.md

@@ -0,0 +1,27 @@
+## vue.config.js什么配置会导致浏览器如果有报错会出现`遮罩层`错误提示并且遮挡页面，`Uncauht runtime error:`
+```javascript
+// vue cli 5+ 或 vite
+devServer: {
+    client: {
+        overlay: false,
+    }
+}
+
+// vue cli 3-4
+devServer: {
+    overlay: false,
+}
+```
+
+## 浏览器查看源码都是被编译后的代码，怎么打开源码映射
+```javascript
+// 方式一
+configureWebpack: {
+    devtool: 'source-map'
+}
+
+// 方式二
+configureWebpack: (config) => {
+    config.devtool = 'source-map'
+}
+```