import webpack

.gitignore

@@ -1 +1,3 @@
 .VSCodeCounter
+node_modules
+dist

.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+    "recommendations": [
+        "ritwickdey.LiveServer"
+    ]
+}

.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+    "VSCodeCounter.useGitignore": true,
+    "VSCodeCounter.exclude":[
+        "**/.gitignore",
+        "**/.vscode/**",
+        "**/lib/**"
+    ]
+}

README.md

@@ -35,3 +35,34 @@ SVG 过渡动画
 元素缓动
 ```
 
+
+
+### Webpack
+
+安装webpack
+
+```bash
+npm i webpack webpack-cli -D
+npm i webpack webpack-cli -g
+```
+
+安装loader
+
+```bash
+npm i style-loader css-loader url-loader file-loader html-loader -D
+```
+
+安装plugins
+
+```bash
+npm i html-webpack-plugin mini-css-extract-plugin clean-webpack-plugin -D
+```
+
+devServer（开发用）：
+
+```bash
+npm i webpack-dev-server -D
+```
+
+
+

package.json

@@ -0,0 +1,32 @@
+{
+  "name": "algorithm-visualization",
+  "version": "1.0.0",
+  "description": "SVG 过渡动画",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "serve": "npx webpack-dev-server",
+    "dev": "webpack --mode development",
+    "prod": "webpack --mode production",
+    "build": "webpack --mode production"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@gitee.com:coder-xiaomo/algorithm-visualization.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "clean-webpack-plugin": "^4.0.0",
+    "css-loader": "^6.7.1",
+    "file-loader": "^6.2.0",
+    "html-loader": "^3.1.0",
+    "html-webpack-plugin": "^5.5.0",
+    "mini-css-extract-plugin": "^2.6.0",
+    "style-loader": "^3.3.1",
+    "url-loader": "^4.1.1",
+    "webpack": "^5.72.1",
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.9.0"
+  }
+}

src/index.html

@@ -7,7 +7,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>小墨 | 算法可视化 | Algorithm Visualization</title>
 
-    <link rel="stylesheet" href="./assets/css/index.css">
+    <!-- 通过 webpack 引入 -->
+    <!-- <link rel="stylesheet" href="./assets/css/index.css"> -->
 
     <style>
         /* 调整 SVG 中文本定位点到文本中央 */

src/webpack.js

@@ -0,0 +1,8 @@
+// 引入html
+import './index.html'
+
+// 引入样式资源
+import './assets/css/index.css'
+
+//
+// import "./assets/lib/d3/7.4.4/d3.min.js"

webpack.config.js

@@ -0,0 +1,105 @@
+/**
+ * webpack 配置文件
+ *
+ * @author coder-xiaomo
+ * @date   2022-05-17
+ */
+
+const { resolve } = require('path');
+
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+
+module.exports = {
+    // 入口起点
+    // entry: "./src/index.html",
+    entry: "./src/webpack.js",
+    // 输出
+    output: {
+        // 输出文件名
+        filename: 'assets/js/built.[contenthash:8].js',
+        chunkFilename: 'assets/js/[id].[contenthash:8].js',
+        // 输出路径     __dirname: 当前文件的目录绝对路径
+        path: resolve(__dirname, 'dist')
+    },
+    // loader配置
+    module: {
+        rules: [
+            // 详细配置
+            // {
+            //     // 匹配文件
+            //     test: /\.css$/,
+            //     // 使用哪些 loader 进行处理
+            //     use: [ // 执行顺序：从后往前
+            //         // 'style-loader', // 创建 style 标签并插入
+            //         MiniCssExtractPlugin.loader, // 将 css 从 js 文件中提取出来（替代 'style-loader' ）
+            //         'css-loader'    // 将 css 文件编程 commonjs 模块加载到 js 中（样式字符串）
+            //     ]
+            // },
+            {
+                // 匹配文件
+                test: /\.css$/,
+                // 使用哪些 loader 进行处理
+                use: [
+                    MiniCssExtractPlugin.loader,
+                    'css-loader'
+                ]
+            },
+            // {
+            //     test: /\.(jpg|png|gif)$/,
+            //     loader: 'url-loader',
+            //     options: {
+            //         // 图片小于 8KB，则使用 base64 处理（减少请求数量）
+            //         limit: 8 * 1024,
+            //         // 问题：url-loader 默认使用es6模块化解析，而html-loader引入图片是commonjs
+            //         // 解析时会出问题: [object Module]
+            //         // 解决：关闭ur1-loader的es6模块化，使用commonjs解析
+            //         esModule: false,
+
+            //         // 给图片进行重命名
+            //         // [hash:10] 取图片的 hash 的前10位
+            //         // [ext] 取文件原来扩展名
+            //         name: '[hash:10].[ext]',
+            //         outputPath: "assets/image"
+            //     }
+            // },
+            {
+                test: /\.html/,
+                // 处理 html 文件的 img 图片（负责引入 img，从而能被 url-loader 处理）
+                loader: 'html-loader'
+            },
+            // 打包其他资源
+            {
+                exclude: /\.(css|js|html|less|jpg|png|gif)$/,
+                loader: 'file-loader',
+                options: {
+                    name: '[hash:10].[ext]',
+                    outputPath: "assets/others"
+                }
+            },
+        ]
+    },
+    // plugin配置
+    plugins: [
+        // 创建一个html，自动引入打包的所有资源
+        new HtmlWebpackPlugin({
+            template: './src/index.html'
+        }),
+        new MiniCssExtractPlugin({
+            filename: "assets/css/built.[contenthash:8].css"
+        }),
+        new CleanWebpackPlugin()
+    ],
+    // 模式
+    // mode: 'development',
+    // mode: 'production',
+
+    // 开发服务器 只会在内存中编译打包，不会有任何输出
+    devServer: {
+        static: resolve(__dirname, 'dist'), // 项目构建后路径
+        compress: true, // 启动 GZIP 压缩
+        port: 3000,
+        open: true      // 自动打开浏览器
+    }
+}