Repository navigation
Expand file tree
/
Copy pathwebpack.config.js
More file actions
129 lines (127 loc) · 4.57 KB
/
Copy pathwebpack.config.js
File metadata and controls
129 lines (127 loc) · 4.57 KB
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
117
118
119
120
121
122
123
124
125
126
127
128
129
const path = require( 'path' );
const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
const DependencyExtractionWebpackPlugin = require( '@wordpress/dependency-extraction-webpack-plugin' );
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
const { BundleAnalyzerPlugin } = require( 'webpack-bundle-analyzer' );
// `@wordpress/route` is not yet registered as a WP core script handle, so
// wp-scripts' default externalization would emit a missing `wp-route`
// dependency. Force it to be bundled into our build instead.
//
// `@wordpress/private-apis` deliberately stays EXTERNAL (uses WP core's
// `wp-private-apis` script handle). Bundling it would give us a separate
// WeakMap from WP core's, breaking `unlock()` where bundled route code and
// Cortext's component adapters consume private APIs exposed by core.
const BUNDLED = new Set( [ '@wordpress/route' ] );
module.exports = {
...defaultConfig,
entry: {
...defaultConfig.entry(),
frontend: path.resolve( __dirname, 'src/frontend.js' ),
},
output: {
...defaultConfig.output,
// Keep lazy chunk URLs stable across `start` and `build`.
// The editor may load a dev runtime that asks for named chunks,
// and a production build must not replace those files with
// numeric-only chunk names.
chunkFilename: '[name].js?ver=[chunkhash]',
},
module: {
...defaultConfig.module,
rules: [
...defaultConfig.module.rules,
// emoji-mart hardcodes jsDelivr CDN URLs for the emoji data and
// image sets it only reaches when no `data` prop is passed or a
// non-native set is rendered. Cortext always passes bundled
// `@emoji-mart/data` and renders native emoji, so those fetches
// never run. Strip them so they stay out of the shipped bundle.
{
test: /[\\/]emoji-mart[\\/]dist[\\/].*\.js$/,
loader: path.resolve(
__dirname,
'scripts/strip-emoji-cdn-loader.js'
),
},
],
},
optimization: {
...defaultConfig.optimization,
chunkIds: 'named',
moduleIds: 'named',
},
// Scope wp-scripts' default 244 KiB asset-size warning to the initial
// entry. Intentional lazy chunks (emoji-mart data, icon library, the
// editor split, the icons vendor chunk pulled by DocumentIconWp) are gated
// behind user actions, so flagging them is noise that drowns out the
// warning when index.js actually regresses. Source maps are dev-only
// and never served to end users. RTL stylesheets are alternates for
// LTR ones (browsers load one per request, never both), so counting
// them toward the entrypoint sum double-bills the user's payload.
performance: {
hints: 'warning',
assetFilter: ( assetFilename ) => {
if ( assetFilename.endsWith( '.map' ) ) {
return false;
}
if ( assetFilename.endsWith( '-rtl.css' ) ) {
return false;
}
return ! /^(emoji-mart-data|emoji-mart-react|icon-library-picker|document-icon-wp|editor|vendors-.*icons)/.test(
assetFilename
);
},
},
plugins: [
...defaultConfig.plugins.map( ( plugin ) => {
if ( plugin instanceof DependencyExtractionWebpackPlugin ) {
return new DependencyExtractionWebpackPlugin( {
requestToExternal( request ) {
if ( BUNDLED.has( request ) ) {
return false;
}
// CSS imports from @wordpress packages (e.g.
// `@wordpress/dataviews/build-style/style.css`)
// must stay bundled into our `index.css`. Otherwise
// DEP emits a phantom script handle like
// `wp-dataviews/build-style/style.css`, which WP
// can't resolve and silently drops our script.
if ( request.endsWith( '.css' ) ) {
return false;
}
},
} );
}
// Lazy CSS chunks (e.g. editor.css) need the same `?ver=...`
// cache buster the JS chunks get from output.chunkFilename
// above. Without this, webpack's runtime loads them as plain
// `editor.css`, so after a deploy the browser can pair fresh
// editor.js with a stale cached editor.css. wp-scripts' default
// MiniCssExtractPlugin instance only sets `filename`, so
// rebuild it with both options preserved.
if ( plugin instanceof MiniCssExtractPlugin ) {
return new MiniCssExtractPlugin( {
...plugin.options,
chunkFilename: '[name].css?ver=[contenthash]',
} );
}
return plugin;
} ),
...( process.env.ANALYZE
? [
new BundleAnalyzerPlugin( {
analyzerMode: 'static',
openAnalyzer: false,
reportFilename: path.resolve(
__dirname,
'build/bundle-report.html'
),
generateStatsFile: true,
statsFilename: path.resolve(
__dirname,
'build/bundle-stats.json'
),
} ),
]
: [] ),
],
};