var webpack = require("webpack"), path = require("path"), fileSystem = require("fs-extra"), env = require("./utils/env"), CopyWebpackPlugin = require("copy-webpack-plugin"), HtmlWebpackPlugin = require("html-webpack-plugin"), TerserPlugin = require("terser-webpack-plugin"); var { CleanWebpackPlugin } = require("clean-webpack-plugin"); const ASSET_PATH = process.env.ASSET_PATH || "/"; var alias = { "react-dom": "@hot-loader/react-dom", }; // load the secrets var secretsPath = path.join(__dirname, "secrets." + env.NODE_ENV + ".js"); var fileExtensions = [ "jpg", "jpeg", "png", "gif", "eot", "otf", "svg", "ttf", "woff", "woff2", ]; if (fileSystem.existsSync(secretsPath)) { alias["secrets"] = secretsPath; } var options = { mode: process.env.NODE_ENV || "development", entry: { popup: path.join(__dirname, "src", "pages", "Popup", "index.tsx"), background: path.join(__dirname, "src", "pages", "Background", "index.ts"), contentScript: path.join(__dirname, "src", "pages", "Content", "index.ts"), }, chromeExtensionBoilerplate: { notHotReload: ["background", "contentScript"], }, output: { filename: "[name].bundle.js", path: path.resolve(__dirname, "build"), clean: true, publicPath: ASSET_PATH, }, module: { rules: [ { // look for .css or .scss files test: /\.(css)$/, // in the `src` directory use: [ { loader: "style-loader", }, { loader: "css-loader", }, ], }, { test: new RegExp(".(" + fileExtensions.join("|") + ")$"), type: "asset/resource", exclude: /node_modules/, // loader: 'file-loader', // options: { // name: '[name].[ext]', // }, }, { test: /\.html$/, loader: "html-loader", exclude: /node_modules/, }, { test: /\.(ts|tsx)$/, loader: "ts-loader", exclude: /node_modules/ }, { test: /\.(js|jsx)$/, use: [ { loader: "source-map-loader", }, { loader: "babel-loader", }, ], exclude: /node_modules/, }, ], }, resolve: { alias: alias, extensions: fileExtensions .map((extension) => "." + extension) .concat([".js", ".jsx", ".ts", ".tsx", ".css"]), fallback: { stream: require.resolve("stream-browserify"), process: require.resolve("process"), }, }, plugins: [ new webpack.ProvidePlugin({ Buffer: ["buffer", "Buffer"], }), new webpack.ProvidePlugin({ process: "process", }), new webpack.DefinePlugin({ "process.env": JSON.stringify(process.env), }), new CleanWebpackPlugin({ verbose: false }), new webpack.ProgressPlugin(), // expose and write the allowed env vars on the compiled bundle new webpack.EnvironmentPlugin(["NODE_ENV"]), new CopyWebpackPlugin({ patterns: [ { from: "src/manifest.json", to: path.join(__dirname, "build"), force: true, transform: function (content, path) { // generates the manifest file using the package.json informations return Buffer.from( JSON.stringify({ description: process.env.npm_package_description, version: process.env.npm_package_version, ...JSON.parse(content.toString()), }) ); }, }, ], }), new CopyWebpackPlugin({ patterns: [ { from: "src/assets/img/icon-128.png", to: path.join(__dirname, "build"), force: true, }, ], }), new CopyWebpackPlugin({ patterns: [ { from: "src/assets/img/icon-34.png", to: path.join(__dirname, "build"), force: true, }, ], }), new HtmlWebpackPlugin({ template: path.join(__dirname, "src", "pages", "Popup", "index.html"), filename: "popup.html", chunks: ["popup"], cache: false, }), ], infrastructureLogging: { level: "info", }, experiments: { topLevelAwait: true, }, }; if (env.NODE_ENV === "development") { options.devtool = "cheap-module-source-map"; } else { options.optimization = { minimize: true, minimizer: [ new TerserPlugin({ extractComments: false, }), ], }; } module.exports = options;