diff --git a/src/assets/css/svg.css b/src/assets/css/svg.css new file mode 100644 index 0000000..412a1d9 --- /dev/null +++ b/src/assets/css/svg.css @@ -0,0 +1,9 @@ +/* 调整 SVG 中文本定位点到文本中央 */ +text { + text-anchor: middle; + dominant-baseline: middle; +} + +svg { + user-select: none; +} diff --git a/src/index.html b/src/index.html index f237210..182d205 100644 --- a/src/index.html +++ b/src/index.html @@ -7,20 +7,9 @@ 小墨 | 算法可视化 | Algorithm Visualization - + - - + @@ -83,9 +72,11 @@ + + - + \ No newline at end of file diff --git a/src/webpack-script.js b/src/webpack-script.js new file mode 100644 index 0000000..b2473a6 --- /dev/null +++ b/src/webpack-script.js @@ -0,0 +1,16 @@ +// // D3.js refer: https://d3js.org/ +// import "./assets/lib/d3/7.4.4/d3.min.js" +// import * as d3 from "d3"; + +// // GSAP refer: https://greensock.com/docs/v3/Installation +// import "./assets/lib/gsap/3.10.4/gsap.min.js" + +// // class +// import "./assets/js/class.js" + +// 排序算法 +import "./assets/js/algorithm/sort.js" +import "./assets/js/index.js" + +// 算法测试 +// import "./assets/js/algorithm/test.js" \ No newline at end of file diff --git a/src/webpack-style.js b/src/webpack-style.js new file mode 100644 index 0000000..43c9376 --- /dev/null +++ b/src/webpack-style.js @@ -0,0 +1,3 @@ +// 引入样式资源 +import './assets/css/index.css' +import './assets/css/svg.css' \ No newline at end of file diff --git a/src/webpack.js b/src/webpack.js deleted file mode 100644 index e089da3..0000000 --- a/src/webpack.js +++ /dev/null @@ -1,8 +0,0 @@ -// 引入html -import './index.html' - -// 引入样式资源 -import './assets/css/index.css' - -// -// import "./assets/lib/d3/7.4.4/d3.min.js" \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index e52d09c..c2a98d2 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -13,8 +13,11 @@ const { CleanWebpackPlugin } = require('clean-webpack-plugin'); module.exports = { // 入口起点 - // entry: "./src/index.html", - entry: "./src/webpack.js", + entry: { + html: "./src/index.html", + style: "./src/webpack-style.js", + // script: "./src/webpack-script.js", + }, // 输出 output: { // 输出文件名 @@ -84,7 +87,9 @@ module.exports = { plugins: [ // 创建一个html，自动引入打包的所有资源 new HtmlWebpackPlugin({ - template: './src/index.html' + template: './src/index.html', + inject: 'body', + scriptLoading: 'blocking' }), new MiniCssExtractPlugin({ filename: "assets/css/built.[contenthash:8].css"