1
- const HtmlWebpackPlugin = require ( 'html-webpack-plugin' )
2
- const { default : WebextensionPlugin } = require ( '@webextension-toolbox/webpack-webextension-plugin' )
3
- const CopyPlugin = require ( 'copy-webpack-plugin' )
4
- const { HotModuleReplacementPlugin } = require ( 'webpack' )
5
- const ReactRefreshWebpackPlugin = require ( '@pmmmwh/react-refresh-webpack-plugin' )
6
- const { createDefinePlugin } = require ( '../webpack.base' )
1
+ import HtmlWebpackPlugin from 'html-webpack-plugin'
2
+ import { WebextensionPlugin } from '@webextension-toolbox/webpack-webextension-plugin'
3
+ import CopyPlugin from 'copy-webpack-plugin'
4
+ import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin'
5
+ import webpack from 'webpack'
6
+ import { createDefinePlugin } from '../webpack.base.ts'
7
+ import packageJson from './package.json' with { type : 'json' }
7
8
8
- module . exports = ( _env , argv ) => {
9
+ export default ( _env : unknown , argv : { mode ?: webpack . Configuration [ 'mode' ] } ) => {
9
10
const isDevelopment = argv . mode === 'development'
10
11
11
12
return [
@@ -31,16 +32,12 @@ module.exports = (_env, argv) => {
31
32
{
32
33
from : './manifest.json' ,
33
34
to : 'manifest.json' ,
34
- transform ( content ) {
35
+ transform ( content : Buffer ) {
35
36
const manifest = JSON . parse ( content . toString ( ) )
36
- const packageJson = require ( './package.json' )
37
-
38
- // Add required fields
39
37
manifest . version = packageJson . version
40
38
manifest . version_name = packageJson . version
41
39
42
40
if ( isDevelopment ) {
43
- // Inject dev CSP
44
41
manifest . content_security_policy = {
45
42
extension_pages : "script-src 'self' http://localhost:3001; object-src 'self'" ,
46
43
}
@@ -72,11 +69,10 @@ module.exports = (_env, argv) => {
72
69
errors : true ,
73
70
warnings : false ,
74
71
} ,
75
- // Disable webpack hot client injection to avoid CSP issues
76
72
webSocketTransport : 'ws' ,
77
73
} ,
78
74
devMiddleware : {
79
- writeToDisk : ( filePath ) => filePath . endsWith ( 'panel.html' ) ,
75
+ writeToDisk : ( filePath : string ) => filePath . endsWith ( 'panel.html' ) ,
80
76
} ,
81
77
}
82
78
: undefined ,
@@ -87,8 +83,8 @@ module.exports = (_env, argv) => {
87
83
plugins : [
88
84
new HtmlWebpackPlugin ( {
89
85
filename : 'panel.html' ,
90
- inject : false , // Disable auto script injection - we handle it manually
91
- templateContent : ( { isDevelopment } ) => `
86
+ inject : false ,
87
+ templateContent : ( ) => `
92
88
<!doctype html>
93
89
<html>
94
90
<head>
@@ -109,7 +105,7 @@ module.exports = (_env, argv) => {
109
105
templateParameters : { isDevelopment } ,
110
106
} ) ,
111
107
createDefinePlugin ( ) ,
112
- ...( isDevelopment ? [ new HotModuleReplacementPlugin ( ) , new ReactRefreshWebpackPlugin ( ) ] : [ ] ) ,
108
+ ...( isDevelopment ? [ new webpack . HotModuleReplacementPlugin ( ) , new ReactRefreshWebpackPlugin ( ) ] : [ ] ) ,
113
109
] ,
114
110
} ) ,
115
111
baseConfig ( {
@@ -140,29 +136,40 @@ module.exports = (_env, argv) => {
140
136
} ) ,
141
137
]
142
138
143
- function baseConfig ( { name, entry, output, plugins, devServer } ) {
139
+ function baseConfig ( {
140
+ name,
141
+ entry,
142
+ output,
143
+ plugins,
144
+ devServer,
145
+ } : {
146
+ name : string
147
+ entry : string
148
+ output ?: webpack . Configuration [ 'output' ]
149
+ plugins ?: webpack . Configuration [ 'plugins' ]
150
+ devServer ?: any
151
+ } ) : webpack . Configuration & { devServer ?: any } {
144
152
return {
145
153
name,
146
154
entry,
147
155
output,
148
- // Use source-map instead of eval-based devtools for CSP compatibility
149
156
devtool : isDevelopment ? 'source-map' : false ,
150
157
devServer,
151
-
152
158
module : {
153
159
rules : [
154
160
{
155
161
test : / \. t s x ? $ / ,
156
162
loader : 'ts-loader' ,
157
163
exclude : / n o d e _ m o d u l e s / ,
158
164
options : {
165
+ configFile : 'tsconfig.webpack.json' ,
159
166
onlyCompileBundledFiles : true ,
160
167
...( isDevelopment && {
161
168
getCustomTransformers : ( ) => ( {
162
- before : [ require ( 'react-refresh-typescript' ) . default ( ) ] ,
169
+ before : [ new ReactRefreshWebpackPlugin ( ) ] ,
163
170
} ) ,
164
- transpileOnly : true ,
165
171
} ) ,
172
+ transpileOnly : true ,
166
173
} ,
167
174
} ,
168
175
{
@@ -183,18 +190,16 @@ module.exports = (_env, argv) => {
183
190
} ,
184
191
] ,
185
192
} ,
186
-
187
193
resolve : {
188
194
extensions : [ '.ts' , '.tsx' , '.js' ] ,
189
195
} ,
190
-
191
196
plugins,
192
197
}
193
198
}
194
199
}
195
200
196
201
function getVersion ( ) {
197
- const version = require ( './package.json' ) . version
202
+ const version : string = packageJson . version
198
203
199
204
return {
200
205
version : version . replace ( / - ( a l p h a | b e t a ) / , '' ) ,
0 commit comments