Chrome拡張機能をTypeScriptで作るためのテンプレートを作った

{
  "name": "chrome-extension-template",
  "repository": "https://github.com/xiaotiantakumi/chrome-extension-template.git",
  "author": "takumi oda",
  "license": "MIT",
  "scripts": {
    "dev": "webpack --config webpack.dev.js",
    "watch": "webpack --config webpack.dev.js --watch",
    "prod": "webpack --config webpack.prod.js",
    "release": "node release $1"
  },
  "devDependencies": {
    "@types/chrome": "^0.0.144",
    "bestzip": "^2.1.7",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^6.1.0",
    "core-js": "^3.6.5",
    "css-loader": "^3.6.0",
    "jest": "^26.4.2",
    "mkdirp": "^1.0.4",
    "npm-run-all": "^4.1.5",
    "regenerator-runtime": "^0.13.7",
    "rimraf": "^3.0.2",
    "sass": "^1.26.10",
    "sass-loader": "^9.0.3",
    "style-loader": "^1.2.1",
    "ts-loader": "^8.2.0",
    "typescript": "^4.3.2",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12",
    "webpack-extension-reloader": "^1.1.4",
    "webpack-merge": "^5.1.4"
  },
  "dependencies": {
    "axios": "^0.21.1",
    "moment": "^2.27.0"
  }
}

const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");

module.exports = {
  entry: {
    content: './src/content.ts',
    background: './src/background.ts',
    options: './src/options.ts',
  },
  plugins: [
    new CleanWebpackPlugin(),
    new CopyPlugin({
      patterns: [
        { from: 'src/manifest.json' },
        {
          from: 'src/assets',
          globOptions: {
            ignore: [
              '**/stylesheets/**',
            ],
          },
        },
        { from: 'src/options.html' },
      ]
    }),
  ],
  output: {
    path: `${__dirname}/dist`,
    filename: '[name].js',
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        loader: 'ts-loader',
        exclude: /node_modules/
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          'style-loader',
          // Translates CSS into CommonJS
          'css-loader',
          // Compiles Sass to CSS
          'sass-loader',
        ],
      },
    ],
  },
  watchOptions: {
    ignored: /node_modules/,
  },
  resolve: {
    extensions: [".js", ".ts"]
  },
};

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "noEmit": false,
    "sourceMap": true,
  },
  "include": ["src"],
  "exclude": ["build", "node_modules","dist","**/*.spec.ts"]
}