Merge pull request #37 from WebExp0528/development

Update webpack config and build script

.env

@@ -0,0 +1,3 @@
+DEV_DIR="dev"
+DIST_DIR="dist"
+TEMP_DIR="temp"

package.json

@@ -4,49 +4,64 @@
  "description": "Boilerplate for Chrome, FF, Opera extension",
  "main": "webpack.config.js",
  "scripts": {
- "start": "webpack --config webpack.config.dev.js",
- "watch": "webpack --config webpack.config.dev.js --watch",
- "build": "webpack --config webpack.config.dist.js",
- "lint-fix": "eslint --ext js,jsx src --fix"
+ "dev:chrome": "cross-env TARGET=chrome webpack --config webpack.config.dev.js",
+ "dev:firefox": "cross-env TARGET=firefox webpack --config webpack.config.dev.js",
+ "dev:opera": "cross-env TARGET=opera webpack --config webpack.config.dev.js",
+ "dev:edge": "cross-env TARGET=edge webpack --config webpack.config.dev.js",
+ "profile:chrome": "cross-env TARGET=chrome webpack --config webpack.config.profile.js",
+ "profile:firefox": "cross-env TARGET=firefox webpack --config webpack.config.profile.js",
+ "profile:opera": "cross-env TARGET=opera webpack --config webpack.config.profile.js",
+ "profile:edge": "cross-env TARGET=edge webpack --config webpack.config.profile.js",
+ "build:chrome": "cross-env TARGET=chrome webpack --config webpack.config.prod.js",
+ "build:firefox": "cross-env TARGET=firefox webpack --config webpack.config.prod.js",
+ "build:opera": "cross-env TARGET=opera webpack --config webpack.config.prod.js",
+ "build:edge": "cross-env TARGET=edge webpack --config webpack.config.prod.js",
+ "build": "yarn run build:chrome && yarn run build:firefox && yarn run build:opera && yarn run build:edge",
+ "lint-fix": "eslint --ext js,jsx,ts,tsx, src --fix"
  },
  "author": "Web Dev",
  "dependencies": {
- "@babel/core": "^7.14.3",
- "@babel/eslint-parser": "^7.14.3",
- "@babel/plugin-proposal-class-properties": "^7.13.0",
- "@babel/plugin-transform-runtime": "^7.14.5",
- "@babel/preset-env": "^7.14.2",
- "@babel/preset-react": "^7.13.13",
- "babel-loader": "^8.2.2",
+ "@babel/core": "^7.16.0",
+ "@babel/eslint-parser": "^7.16.3",
+ "@babel/plugin-proposal-class-properties": "^7.16.0",
+ "@babel/plugin-transform-runtime": "^7.16.4",
+ "@babel/preset-env": "^7.16.4",
+ "@babel/preset-react": "^7.16.0",
+ "babel-loader": "^8.2.3",
  "clean-webpack-plugin": "^3.0.0",
- "copy-webpack-plugin": "^8.1.1",
- "core-js": "^3.12.1",
- "css-loader": "^5.2.5",
- "html-webpack-plugin": "^5.3.1",
- "node-sass": "^6.0.0",
+ "copy-webpack-plugin": "^10.0.0",
+ "core-js": "^3.19.1",
+ "cross-env": "^7.0.3",
+ "css-loader": "^6.5.1",
+ "dotenv": "^10.0.0",
+ "html-webpack-plugin": "^5.5.0",
+ "node-sass": "^6.0.1",
  "prop-types": "^15.7.2",
  "react": "^17.0.2",
  "react-dom": "^17.0.2",
- "sass-loader": "^11.1.1",
- "style-loader": "^2.0.0",
- "terser-webpack-plugin": "^5.1.2",
+ "sass-loader": "^12.3.0",
+ "style-loader": "^3.3.1",
+ "terser-webpack-plugin": "^5.2.5",
  "webextension-polyfill": "^0.8.0",
- "webpack": "^5.37.1",
- "webpack-cli": "^4.7.0",
+ "webpack": "^5.64.2",
+ "webpack-bundle-analyzer": "^4.5.0",
+ "webpack-cli": "^4.9.1",
+ "webpack-ext-reloader": "^1.1.8",
+ "webpack-extension-manifest-plugin": "^0.8.0",
  "zip-webpack-plugin": "^4.0.1"
  },
  "devDependencies": {
- "eslint": "^7.26.0",
- "eslint-config-airbnb": "^18.2.1",
+ "eslint": "^8.3.0",
+ "eslint-config-airbnb": "^19.0.0",
  "eslint-config-prettier": "^8.3.0",
  "eslint-plugin-babel": "^5.3.1",
- "eslint-plugin-import": "^2.23.2",
- "eslint-plugin-jsx-a11y": "^6.4.1",
- "eslint-plugin-prettier": "^3.4.0",
- "eslint-plugin-react": "^7.23.2",
- "eslint-plugin-react-hooks": "^4.2.0",
- "eslint-webpack-plugin": "^2.5.4",
- "prettier": "^2.3.0"
+ "eslint-plugin-import": "^2.25.3",
+ "eslint-plugin-jsx-a11y": "^6.5.1",
+ "eslint-plugin-prettier": "^4.0.0",
+ "eslint-plugin-react": "^7.27.1",
+ "eslint-plugin-react-hooks": "^4.3.0",
+ "eslint-webpack-plugin": "^3.1.1",
+ "prettier": "^2.4.1"
  },
  "license": "SEE LICENSE IN LICENSE",
  "repository": {

src/manifest.json → src/baseManifest.json

@@ -18,7 +18,7 @@
  }
  ],
  "background": {
- "scripts": ["background/background.js", "hotreload/hotreload.js"],
+ "scripts": ["background/background.js"],
  "persistent": true
  },
  "permissions": ["tabs", "storage", "http://*/*", "https://*/*"],

webpack.config.dev.js

@@ -1,14 +1,21 @@
-const ESLintPlugin = require("eslint-webpack-plugin");
+const webpack = require("webpack");
+const ExtReloader = require("webpack-ext-reloader");
+
 const {
  getHTMLPlugins,
  getOutput,
  getCopyPlugins,
- getFirefoxCopyPlugins,
  getEntry,
  getResolves,
+ getDefinePlugins,
+ getCleanWebpackPlugin,
+ config,
+ getExtensionManifestPlugin,
+ getEslintPlugin,
 } = require("./webpack.utils");
 
-const config = require("./config.json");
+const NODE_ENV = "development";
+const TARGET = process.env.TARGET;
 
 const generalConfig = {
  mode: "development",
@@ -17,18 +24,9 @@ const generalConfig = {
  rules: [
  {
  test: /\.(js|jsx)$/,
- use: [
- {
- loader: "babel-loader",
- options: {
- presets: ["@babel/preset-env", "@babel/preset-react"],
- },
- },
- ],
+ use: [{ loader: "babel-loader", options: { presets: ["@babel/preset-env", "@babel/preset-react"] } }],
  exclude: /node_modules/,
- resolve: {
- extensions: [".js", ".jsx"],
- },
+ resolve: { extensions: [".js", ".jsx"] },
  },
  {
  test: /\.scss$/,
@@ -47,41 +45,41 @@ const generalConfig = {
  ],
  },
  resolve: getResolves(),
-};
-
-const eslintOptions = {
- fix: true,
+ stats: {
+ all: false,
+ builtAt: true,
+ errors: true,
+ hash: true,
+ },
+ watch: true,
+ watchOptions: {
+ aggregateTimeout: 200,
+ poll: 1000,
+ },
 };
 
 module.exports = [
  {
  ...generalConfig,
- entry: getEntry(config.chromePath),
- output: getOutput("chrome", config.devDirectory),
+ entry: getEntry(config?.SRC_DIR ?? "src"),
+ output: getOutput(TARGET, config?.DEV_DIR ?? "dev"),
  plugins: [
- new ESLintPlugin(eslintOptions),
- ...getHTMLPlugins("chrome", config.devDirectory, config.chromePath),
- ...getCopyPlugins("chrome", config.devDirectory, config.chromePath),
- ],
- },
- {
- ...generalConfig,
- entry: getEntry(config.operaPath),
- output: getOutput("opera", config.devDirectory),
- plugins: [
- new ESLintPlugin(eslintOptions),
- ...getHTMLPlugins("opera", config.devDirectory, config.operaPath),
- ...getCopyPlugins("opera", config.devDirectory, config.operaPath),
- ],
- },
- {
- ...generalConfig,
- entry: getEntry(config.firefoxPath),
- output: getOutput("firefox", config.devDirectory),
- plugins: [
- new ESLintPlugin(eslintOptions),
- ...getFirefoxCopyPlugins("firefox", config.devDirectory, config.firefoxPath),
- ...getHTMLPlugins("firefox", config.devDirectory, config.firefoxPath),
+ ...getCleanWebpackPlugin(TARGET, config?.DEV_DIR ?? "dev"),
+ new webpack.ProgressPlugin(),
+ ...getEslintPlugin(),
+ ...getDefinePlugins({ NODE_ENV }),
+ ...getHTMLPlugins(TARGET, config.DEV_DIR, config?.SRC_DIR ?? "src"),
+ ...getCopyPlugins(TARGET, config.DEV_DIR, config?.SRC_DIR ?? "src"),
+ ...getExtensionManifestPlugin(),
+ new ExtReloader({
+ port: 9090,
+ reloadPage: true,
+ entries: {
+ contentScript: ["content"],
+ background: "background",
+ extensionPage: ["popup", "options"],
+ },
+ }),
  ],
  },
 ];