FUT Web App TamperMonkey 脚本使用教程

1. 项目的目录结构及介绍

futwebapp-tampermonkey/
├── LICENSE
├── README.md
├── package-lock.json
├── package.json
├── tampermonkey-headers.js
├── webpack.config.js
├── webpack.config.prd.js
└── src/
    ├── app/
    │   ├── features/
    │   └── index.js
    ├── images/
    ├── styles/
    └── index.js

• LICENSE: 项目许可证文件。
• README.md: 项目说明文档。
• package-lock.json 和 package.json: 项目依赖管理文件。
• tampermonkey-headers.js: TamperMonkey 脚本头部信息。
• webpack.config.js 和 webpack.config.prd.js: Webpack 配置文件。
• src/: 源代码目录。
  • app/: 应用功能模块。
  • images/: 图片资源。
  • styles/: 样式文件。
  • index.js: 入口文件。

2. 项目的启动文件介绍

项目的启动文件是 src/index.js，它是整个 TamperMonkey 脚本的入口点。该文件负责初始化脚本并加载其他模块。

// src/index.js
import './app/index';

3. 项目的配置文件介绍

项目的配置文件主要是 webpack.config.js 和 webpack.config.prd.js。这两个文件定义了 Webpack 的构建配置，包括入口点、输出路径、模块解析规则等。

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'fut-enhancer-user.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  }
};

• entry: 指定入口文件。
• output: 指定输出路径和文件名。
• module: 定义模块解析规则，例如使用 Babel 加载器处理 JavaScript 文件。

通过这些配置文件，可以确保项目在开发和生产环境中的正确构建和运行。