package.json (yarn)

package.json

{
  "name": "webext-preact-typescript-starter",
  "version": "1.0.0",
  "description": "A starter for web extension projects with Preact and Typescript",
  "main": "index.tsx",
  "engines": {
    "node": ">=8.0.0",
    "npm": ">=6.0.0"
  },
  "scripts": {
    "build": "webpack -w --display-error-details --progress --colors",
    "watch": "webpack --watch",
    "start": "web-ext run -s extension/",
    "lint": "tslint -c ./tslint.json './src/**/*.ts*'",
    "test": "jest"
  },
  "author": "Rishi Speets",
  "license": "MIT",
  "devDependencies": {
    "@types/jest": "^20.0.0",
    "@types/webpack-env": "^1.13.6",
    "autoprefixer": "^9.7.4",
    "awesome-typescript-loader": "^5.2.0",
    "babel-core": "^6.26.3",
    "babel-eslint": "^8.2.5",
    "babel-loader": "^7.1.4",
    "babel-plugin-react-html-attrs": "^2.0.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-function-bind": "^6.22.0",
    "babel-plugin-transform-node-env-inline": "^0.2.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "jest": "^20.0.0",
    "postcss-cli": "^7.1.0",
    "preact-render-spy": "^1.3.0",
    "prettier": "^1.13.7",
    "regenerator-runtime": "^0.12.0",
    "source-map-loader": "^0.2.3",
    "tailwindcss": "^1.2.0",
    "ts-jest": "^23.0.0",
    "ts-loader": "^4.4.2",
    "tslint": "^5.10.0",
    "tslint-config-prettier": "^1.13.0",
    "tslint-react": "^3.6.0",
    "typescript": "^3.8.3",
    "typescript-styled-plugin": "^0.7.0",
    "web-ext": "^2.7.0",
    "web-ext-types": "kelseasy/web-ext-types",
    "webpack": "^4.14.0",
    "webpack-cli": "^3.0.8"
  },
  "dependencies": {
    "@babel/runtime": "^7.9.2",
    "@types/classnames": "^2.2.10",
    "@types/firefox-webext-browser": "^70.0.1",
    "@types/react-select": "^3.0.11",
    "babel-plugin-macros": "^2.8.0",
    "classnames": "^2.2.6",
    "immutable": "^3.8.2",
    "memoize-one": "^5.1.1",
    "preact": "^10.3.4",
    "preact-compat": "^3.19.0",
    "prop-types": "15",
    "raf": "^3.4.1",
    "react-json-view": "^1.19.1",
    "react-select": "^3.1.0",
    "styled-components": "^3.3.3",
    "tailwind.macro": "^0.5.10"
  }
}

webpack.config.json

const path = require("path");
const webpack = require("webpack");

module.exports = {
	entry: {
		// Each entry in here would declare a file that needs to be transpiled
		// and included in the extension source.
		// For example, you could add a background script like:
		// background: './src/background.js',
		extension: "./src/index.tsx"
	},
	output: {
		path: path.join(path.resolve(__dirname), "extension", "dist"),
		filename: "[name].js"
	},
	module: {
		// This transpiles all code (except for third party modules) using Babel.
		rules: [
			{
				exclude: /node_modules/,
				test: /\.tsx?$/,
				use: ["ts-loader"]
			}
		]
	},
	resolve: {
		// This allows you to import modules just like you would in a NodeJS app.
		alias: {
			react: "preact/compat",
			"react-dom/test-utils": "preact/test-utils",
			"react-dom": "preact/compat",
		},
		
		extensions: [".ts", ".tsx"],
		modules: ["src", "node_modules"]
	},
	plugins: [
		// Since some NodeJS modules expect to be running in Node, it is helpful
		// to set this environment var to avoid reference errors.
		new webpack.DefinePlugin({
			"process.env.NODE_ENV": JSON.stringify("production")
		})
	],
	node: {
		global: true
	},
	// This will expose source map files so that errors will point to your
	// original source files instead of the transpiled files.
	devtool: "sourcemap"
};