gpc-optmeowt/webpack.config.js at v4.0.1 · privacy-tech-lab/gpc-optmeowt · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
/*
Licensed per https://github.com/privacy-tech-lab/gpc-optmeowt/blob/main/LICENSE.md
privacy-tech-lab, https://www.privacytechlab.org/
*/


const CopyPlugin = require("copy-webpack-plugin")
const TerserPlugin = require("terser-webpack-plugin")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
const path = require("path")

// ! Implement a "frontend" export in order to use a dev serve
// ! Implement terser for production
// ! Implement file loader for assets

module.exports = (env, argv) => {
	const browser = env.chrome ? "chrome" : "firefox"	// default to firefox build
	const isProduction = argv.mode == "production"	// sets bool depending on build

	return {
		name: "background",
		// This is useful, plus we need it b/c otherwise we get an "unsafe eval" problem
		entry: {
			background: "./src/background/control.js",
			popup: "./src/popup/popup.js",
			options: "./src/options/options.js"
		},
		output: {
			filename: "[name].bundle.js",
			path: path.resolve(__dirname, `${isProduction ? "dist" : "dev"}/${browser}` )
		},
		devtool: isProduction ? "source-map" : "cheap-source-map",
		devServer: {
			open: true,
			host: "localhost",
		},
		optimization: {
			minimize: true,
			minimizer: [new TerserPlugin()],
		},
		module: {
			rules: [
				{
					// compile for the correct browser
					test: /\.js$/,
					exclude: /node_modules/,
					loader: 'string-replace-loader',
					options: {
						search: /\$BROWSER/g,
						replace: browser,
					}
				},
				{
					test: /\.js$/,
					exclude: /node_modules/,
					use: {
						loader: 'babel-loader'
					}
				},
				{
					test: /\.css$/,
					use: ["style-loader", "css-loader"]
				},
				{
					test: /\.(png|svg|jpe?g|gif)$/,
					loader: "file-loader",
					options: {
					  outputPath: "assets/",
					  publicPath: "assets/",
					  name: "[name].[ext]",
					}
				}
			]
		},

		// All of our "extra" stuff is currently being copies over
		// When time permits, lets have everything compile correclty
		plugins: [
			new CleanWebpackPlugin(),
			new CopyPlugin({
				patterns: [{ context: path.resolve(__dirname, "src"), from: "assets", to: "assets" }],
			}),
			new CopyPlugin({
				patterns: [{
					context: path.resolve(__dirname, "src"),
					from: "content-scripts",
					to: "content-scripts" }],
			}),
			new CopyPlugin({
				patterns: [{ context: path.resolve(__dirname, env.chrome ? "src/manifests/chrome" : "src/manifests/firefox"),
				from: (isProduction ? "manifest-dist.json" : "manifest-dev.json"),
				to: "manifest.json"}],
			}),
			new CopyPlugin({
				patterns: [{ context: path.resolve(__dirname, "src"), from: "rules", to: "rules" }],
			}),
			new CopyPlugin({
				patterns: [{ context: path.resolve(__dirname, "src/options"), from: "views", to: "views" }],
			}),
			new CopyPlugin({
				patterns: [{ context: path.resolve(__dirname, "src/options"), from: "components", to: "components" }],
			}),
			new HtmlWebpackPlugin({
				filename: "options.html",
				template: "src/options/options.html",
				chunks: ["options"],
			}),
			new HtmlWebpackPlugin({
				filename: "popup.html",
				template: "src/popup/popup.html",
				chunks: ["popup"],
			}),
		]
	}
}