scaffold out webpack files

README.md

@@ -0,0 +1 @@
+# 🚀 Web-extension-starter

package.json

@@ -1,9 +1,27 @@
 {
   "name": "web-extension-starter",
   "version": "1.0.0",
-  "description": "Web Extension Starter",
+  "description": "Web extension starter",
   "main": "index.js",
   "repository": "https://github.com/abhijithvijayan/web-extension-starter.git",
   "author": "abhijithvijayan <34790378+abhijithvijayan@users.noreply.github.com>",
-  "private": true
+  "private": true,
+  "scripts": {
+    "build": "webpack",
+    "start": "webpack-dev-server"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.6.4",
+    "@babel/preset-env": "^7.6.3",
+    "babel-loader": "^8.0.6",
+    "babel-plugin-syntax-dynamic-import": "^6.18.0",
+    "css-loader": "^3.2.0",
+    "html-webpack-plugin": "^3.2.0",
+    "node-sass": "^4.13.0",
+    "sass-loader": "^8.0.0",
+    "style-loader": "^1.0.0",
+    "webpack": "^4.41.2",
+    "webpack-cli": "^3.3.9",
+    "webpack-dev-server": "^3.9.0"
+  }
 }

src/scripts/background.js

@@ -0,0 +1 @@
+console.log("Hello World from background main file!");

src/scripts/options.js

@@ -0,0 +1 @@
+console.log("Hello World from options main file!");

src/scripts/popup.js

@@ -0,0 +1 @@
+console.log("Hello World from popup main file!");

webpack.config.js

@@ -0,0 +1,86 @@
+const path = require('path');
+const webpack = require('webpack');
+
+/*
+ * SplitChunksPlugin is enabled by default and replaced
+ * deprecated CommonsChunkPlugin. It automatically identifies modules which
+ * should be splitted of chunk by heuristics using module duplication count and
+ * module category (i. e. node_modules). And splits the chunks…
+ *
+ * It is safe to remove "splitChunks" from the generated configuration
+ * and was added as an educational example.
+ *
+ * https://webpack.js.org/plugins/split-chunks-plugin/
+ *
+ */
+
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+/*
+ * We've enabled HtmlWebpackPlugin for you! This generates a html
+ * page for you when you compile webpack, which will make you start
+ * developing and prototyping faster.
+ *
+ * https://github.com/jantimon/html-webpack-plugin
+ *
+ */
+
+module.exports = {
+	mode: 'development',
+
+	entry: {
+		background: './src/scripts/background.js',
+		popup: './src/scripts/popup.js',
+		options: './src/scripts/options.js'
+	},
+
+	output: {
+		filename: '[name].[chunkhash].js',
+		path: path.resolve(__dirname, 'extension')
+	},
+
+	plugins: [new webpack.ProgressPlugin(), new HtmlWebpackPlugin()],
+
+	module: {
+		rules: [
+			{
+				test: /.(js|jsx)$/,
+				include: [path.resolve(__dirname, 'src/scripts')],
+				loader: 'babel-loader',
+
+				options: {
+					plugins: ['syntax-dynamic-import'],
+
+					presets: [
+						[
+							'@babel/preset-env',
+							{
+								modules: false
+							}
+						]
+					]
+				}
+			}
+		]
+	},
+
+	optimization: {
+		splitChunks: {
+			cacheGroups: {
+				vendors: {
+					priority: -10,
+					test: /[\\/]node_modules[\\/]/
+				}
+			},
+
+			chunks: 'async',
+			minChunks: 1,
+			minSize: 30000,
+			name: true
+		}
+	},
+
+	devServer: {
+		open: true
+	}
+};