mirror of
https://gitee.com/coder-xiaomo/algorithm-visualization
synced 2025-01-10 11:48:18 +08:00
Merge branch 'webpack' into develop
This commit is contained in:
commit
167495549c
4
.gitignore
vendored
4
.gitignore
vendored
@ -1 +1,3 @@
|
||||
.VSCodeCounter
|
||||
.VSCodeCounter
|
||||
node_modules
|
||||
dist
|
||||
5
.vscode/extensions.json
vendored
Normal file
5
.vscode/extensions.json
vendored
Normal file
@ -0,0 +1,5 @@
|
||||
{
|
||||
"recommendations": [
|
||||
"ritwickdey.LiveServer"
|
||||
]
|
||||
}
|
||||
8
.vscode/settings.json
vendored
Normal file
8
.vscode/settings.json
vendored
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"VSCodeCounter.useGitignore": true,
|
||||
"VSCodeCounter.exclude":[
|
||||
"**/.gitignore",
|
||||
"**/.vscode/**",
|
||||
"**/lib/**"
|
||||
]
|
||||
}
|
||||
7332
package-lock.json
generated
Normal file
7332
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
32
package.json
Normal file
32
package.json
Normal file
@ -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"
|
||||
}
|
||||
}
|
||||
9
src/assets/css/svg.css
Normal file
9
src/assets/css/svg.css
Normal file
@ -0,0 +1,9 @@
|
||||
/* 调整 SVG 中文本定位点到文本中央 */
|
||||
text {
|
||||
text-anchor: middle;
|
||||
dominant-baseline: middle;
|
||||
}
|
||||
|
||||
svg {
|
||||
user-select: none;
|
||||
}
|
||||
@ -7,19 +7,9 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>小墨 | 算法可视化 | Algorithm Visualization</title>
|
||||
|
||||
<link rel="stylesheet" href="./assets/css/index.css">
|
||||
|
||||
<style>
|
||||
/* 调整 SVG 中文本定位点到文本中央 */
|
||||
text {
|
||||
text-anchor: middle;
|
||||
dominant-baseline: middle;
|
||||
}
|
||||
|
||||
svg {
|
||||
user-select: none;
|
||||
}
|
||||
</style>
|
||||
<!-- 如果使用webpack，请注释掉下面两行，通过 webpack 引入 -->
|
||||
<!-- <link rel="stylesheet" href="./assets/css/index.css"> -->
|
||||
<!-- <link rel="stylesheet" href="./assets/css/svg.css"> -->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -82,9 +72,11 @@
|
||||
<!-- 排序算法 -->
|
||||
<script src="./assets/js/algorithm/sort.js"></script>
|
||||
|
||||
<!-- 主script -->
|
||||
<script src="./assets/js/index.js"></script>
|
||||
|
||||
<!-- 算法测试 -->
|
||||
<!-- <script src="./assets/js/algorithm/test.js"></script> -->
|
||||
<script src="./assets/js/algorithm/test.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
16
src/webpack-script.js
Normal file
16
src/webpack-script.js
Normal file
@ -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"
|
||||
3
src/webpack-style.js
Normal file
3
src/webpack-style.js
Normal file
@ -0,0 +1,3 @@
|
||||
// 引入样式资源
|
||||
import './assets/css/index.css'
|
||||
import './assets/css/svg.css'
|
||||
110
webpack.config.js
Normal file
110
webpack.config.js
Normal file
@ -0,0 +1,110 @@
|
||||
/**
|
||||
* 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: {
|
||||
html: "./src/index.html",
|
||||
style: "./src/webpack-style.js",
|
||||
// script: "./src/webpack-script.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',
|
||||
inject: 'body',
|
||||
scriptLoading: 'blocking'
|
||||
}),
|
||||
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 // 自动打开浏览器
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user