webpack-extension-reloader 项目教程

1. 项目目录结构及介绍

webpack-extension-reloader/
├── dist/
│   ├── background.js
│   ├── content.js
│   └── manifest.json
├── src/
│   ├── background.ts
│   ├── content.ts
│   └── manifest.json
├── webpack.config.js
├── package.json
├── tsconfig.json
└── README.md

目录结构说明：

• dist/: 打包后的文件目录，包含浏览器扩展的最终输出文件。
  • background.js: 后台脚本文件。
  • content.js: 内容脚本文件。
  • manifest.json: 浏览器扩展的配置文件。
• src/: 源代码目录，包含TypeScript源文件和扩展的配置文件。
  • background.ts: 后台脚本源文件。
  • content.ts: 内容脚本源文件。
  • manifest.json: 浏览器扩展的配置文件。
• webpack.config.js: Webpack配置文件，用于配置打包过程。
• package.json: 项目的依赖管理文件，包含项目的依赖和脚本命令。
• tsconfig.json: TypeScript配置文件，用于配置TypeScript编译选项。
• README.md: 项目的说明文档。

2. 项目启动文件介绍

启动命令

在package.json中，通常会有以下启动命令：

{
  "scripts": {
    "start": "webpack --watch",
    "build": "webpack --mode production"
  }
}

• start: 启动开发模式，使用webpack --watch命令监听文件变化并自动重新编译。
• build: 构建生产环境包，使用webpack --mode production命令进行打包。

启动步骤

1. 安装依赖：

   npm install
   

2. 启动开发模式：

   npm start
   

3. 构建生产包：

   npm run build
   

3. 项目配置文件介绍

webpack.config.js

const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  entry: {
    background: './src/background.ts',
    content: './src/content.ts'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ['.ts', '.js']
  },
  plugins: [
    new CopyPlugin({
      patterns: [
        { from: 'src/manifest.json', to: 'manifest.json' }
      ]
    })
  ]
};

配置文件说明：

• entry: 定义入口文件，background.ts和content.ts分别对应后台脚本和内容脚本。
• output: 定义输出目录和文件名，dist目录下生成background.js和content.js。
• module: 配置TypeScript加载器，用于处理.ts文件。
• resolve: 配置文件扩展名解析，支持.ts和.js文件。
• plugins: 使用CopyPlugin插件将manifest.json文件复制到输出目录。

tsconfig.json

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist"
  },
  "include": ["src/**/*"]
}

配置文件说明：

• compilerOptions: 配置TypeScript编译选项。
  • target: 指定编译目标为ES6。
  • module: 指定模块系统为CommonJS。
  • strict: 启用严格模式。
  • esModuleInterop: 启用ES模块互操作性。
  • outDir: 指定输出目录为dist。
• include: 指定包含的源文件目录为src。

通过以上配置，项目可以顺利进行开发和构建，生成适用于浏览器的扩展包。