aynish/grasp
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

configure webpack to split vendor libraries in a separate chunk

Browse source 
also generally makes it somewhat cleaner import-wise
This commit is contained in:
Dima Gerasimov 2022-12-30 01:47:26 +00:00 committed by karlicoss
parent 91400126ae
commit 5ec8bcb822
8 changed files with 52 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
extension/.flowconfig
View file

@ -2,10 +2,10 @@
.*/node_modules/.*
[include]
src/
[libs]
node_modules/flow-interfaces-chrome/interfaces/
src/js/browser_types.js
[lints]

8
extension/src/js/browser_types.js → extension/flow-typed/webextension-polyfill.js vendored
View file

@ -91,3 +91,11 @@ declare var browser: {
tabs: browser$tabs,
scripting: browser$scripting,
}
declare module "webextension-polyfill" {
declare var storage: browser$storage;
declare var permissions: browser$permissions;
declare var tabs: browser$tabs;
declare var scripting: browser$scripting;
}

24
extension/src/js/background.js
View file

@ -1,5 +1,4 @@
/* @flow */
// TODO do I really need to annotate all files with @flow??
// hmm this works if you declare type: module in manifest
@ -7,16 +6,19 @@
// I assume this is only processed with webpack
// import * as browser from "./browser-polyfill"
const manifestVersion = chrome.runtime.getManifest().manifest_version
if (manifestVersion == 3) {
// for v3 it's provided via manifest
try {
/* eslint-disable no-undef */
importScripts('./browser-polyfill.js')
} catch (e) {
console.error(e)
}
}
// this works with v3 if you need to
// const manifestVersion = chrome.runtime.getManifest().manifest_version
// if (manifestVersion == 3) {
// // for v3 it's provided via manifest
// try {
// /* eslint-disable no-undef */
// importScripts('./browser-polyfill.js')
// } catch (e) {
// console.error(e)
// }
// }
import * as browser from "webextension-polyfill"
import {COMMAND_CAPTURE_SIMPLE, METHOD_CAPTURE_WITH_EXTRAS, showNotification} from './common'

2
extension/src/js/options.js
View file

@ -1,4 +1,6 @@
/* @flow */
import browser from "webextension-polyfill"
export type Options = {
endpoint: string;

2
extension/src/js/permissions.js
View file

@ -1,4 +1,6 @@
/* @flow */
import browser from "webextension-polyfill"
function urlForPermissionsCheck(url: string): string {
var u = new URL(url);

2
extension/src/options.html
View file

@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="browser-polyfill.js"/></script>
<script type="text/javascript" src="webextension-polyfill.js"></script>
<script type="text/javascript" src="options_page.js"/></script>
<style>
input:invalid {

2
extension/src/popup.html
View file

@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="browser-polyfill.js"></script>
<script type="text/javascript" src="webextension-polyfill.js"></script>
<script type="text/javascript" src="popup.js"></script>
</head>
<body>

27
extension/webpack.config.js
View file

@ -118,9 +118,10 @@ const manifestExtra = {
manifest_version: v3 ? 3 : 2,
background: (v3 ? {
service_worker: 'background.js',
type: 'module',
} : {
scripts: [
'browser-polyfill.js',
'webextension-polyfill.js',
'background.js',
],
persistent: false,
@ -165,7 +166,28 @@ const options = {
optimization: {
// https://webpack.js.org/configuration/optimization
// don't think minimize worth it for such a tiny extension
minimize: false
minimize: false,
// split chunks is so vendors split out into separate js files
// to prevent bloating individual source files
// seems that at the moment we need to manually load the chunks in the corresponding
// html files or manifest
// split chunks doc recommend using webpack html plugin??
splitChunks: {
// seems necessary, otherwise doesn't split out polyfill??
chunks: 'all',
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name(module) {
const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
return packageName
},
// create chunk regardless size etc
enforce: true,
},
},
},
},
module: {
rules: [
@ -194,7 +216,6 @@ const options = {
patterns: [
{ context: 'src', from: '**/*.html' },
{ context: 'src', from: '**/*.png' },
{ from: 'node_modules/webextension-polyfill/dist/browser-polyfill.js'},
]
}),
new WebpackExtensionManifestPlugin({