jiti-meet/webpack.config.js

325 lines
11 KiB
JavaScript
Raw Normal View History

/* global __dirname */
const CircularDependencyPlugin = require('circular-dependency-plugin');
const process = require('process');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
2016-09-22 05:57:22 +00:00
2016-12-09 01:17:49 +00:00
/**
* The URL of the Jitsi Meet deployment to be proxy to in the context of
* development with webpack-dev-server.
*/
const devServerProxyTarget
= process.env.WEBPACK_DEV_SERVER_PROXY_TARGET || 'https://alpha.jitsi.net';
2016-12-09 01:17:49 +00:00
const analyzeBundle = process.argv.indexOf('--analyze-bundle') !== -1;
const detectCircularDeps = process.argv.indexOf('--detect-circular-deps') !== -1;
const minimize
2016-11-29 02:06:23 +00:00
= process.argv.indexOf('-p') !== -1
|| process.argv.indexOf('--optimize-minimize') !== -1;
/**
* Build a Performance configuration object for the given size.
* See: https://webpack.js.org/configuration/performance/
*/
function getPerformanceHints(size) {
return {
hints: minimize ? 'error' : false,
maxAssetSize: size,
maxEntrypointSize: size
};
}
2016-09-22 05:57:22 +00:00
// The base Webpack configuration to bundle the JavaScript artifacts of
// jitsi-meet such as app.bundle.js and external_api.js.
const config = {
2016-12-09 01:17:49 +00:00
devServer: {
https: true,
inline: true,
proxy: {
'/': {
bypass: devServerProxyBypass,
secure: false,
target: devServerProxyTarget,
headers: {
'Host': new URL(devServerProxyTarget).host
}
2016-12-09 01:17:49 +00:00
}
}
},
2016-09-22 05:57:22 +00:00
devtool: 'source-map',
2018-12-21 15:30:22 +00:00
mode: minimize ? 'production' : 'development',
2016-09-22 05:57:22 +00:00
module: {
2017-01-30 18:45:08 +00:00
rules: [ {
// Transpile ES2015 (aka ES6) to ES5. Accept the JSX syntax by React
// as well.
exclude: [
2020-07-09 07:17:23 +00:00
new RegExp(`${__dirname}/node_modules/(?!@jitsi/js-utils)`)
],
2017-02-07 21:44:37 +00:00
loader: 'babel-loader',
2017-01-30 18:45:08 +00:00
options: {
2016-11-24 06:42:07 +00:00
// XXX The require.resolve bellow solves failures to locate the
// presets when lib-jitsi-meet, for example, is npm linked in
2018-10-02 11:19:16 +00:00
// jitsi-meet.
plugins: [
require.resolve('@babel/plugin-transform-flow-strip-types'),
require.resolve('@babel/plugin-proposal-class-properties'),
require.resolve('@babel/plugin-proposal-export-default-from'),
require.resolve('@babel/plugin-proposal-export-namespace-from'),
require.resolve('@babel/plugin-proposal-nullish-coalescing-operator'),
require.resolve('@babel/plugin-proposal-optional-chaining')
2018-10-02 11:19:16 +00:00
],
presets: [
2017-01-30 18:45:08 +00:00
[
2018-10-02 11:19:16 +00:00
require.resolve('@babel/preset-env'),
2017-01-30 18:45:08 +00:00
// Tell babel to avoid compiling imports into CommonJS
// so that webpack may do tree shaking.
2019-04-08 11:18:35 +00:00
{
modules: false,
// Specify our target browsers so no transpiling is
// done unnecessarily. For browsers not specified
// here, the ES2015+ profile will be used.
targets: {
chrome: 58,
electron: 2,
firefox: 54,
safari: 11
}
}
2017-01-30 18:45:08 +00:00
],
2018-10-02 11:19:16 +00:00
require.resolve('@babel/preset-flow'),
require.resolve('@babel/preset-react')
2017-01-30 18:45:08 +00:00
]
},
test: /\.jsx?$/
2016-11-29 02:06:23 +00:00
}, {
2016-09-22 05:57:22 +00:00
// Expose jquery as the globals $ and jQuery because it is expected
// to be available in such a form by multiple jitsi-meet
2017-11-28 02:29:00 +00:00
// dependencies including lib-jitsi-meet.
2016-09-22 05:57:22 +00:00
2017-02-07 21:44:37 +00:00
loader: 'expose-loader?$!expose-loader?jQuery',
2016-09-22 05:57:22 +00:00
test: /\/node_modules\/jquery\/.*\.js$/
2016-11-29 02:06:23 +00:00
}, {
2016-09-22 05:57:22 +00:00
// Allow CSS to be imported into JavaScript.
2017-01-30 18:45:08 +00:00
test: /\.css$/,
use: [
2017-02-07 21:44:37 +00:00
'style-loader',
'css-loader'
2017-01-30 18:45:08 +00:00
]
2019-08-15 15:49:40 +00:00
}, {
test: /\/node_modules\/@atlaskit\/modal-dialog\/.*\.js$/,
resolve: {
alias: {
'react-focus-lock': `${__dirname}/react/features/base/util/react-focus-lock-wrapper.js`
}
}
}, {
test: /\/react\/features\/base\/util\/react-focus-lock-wrapper.js$/,
resolve: {
alias: {
'react-focus-lock': `${__dirname}/node_modules/react-focus-lock`
}
}
2019-08-30 16:39:06 +00:00
}, {
test: /\.svg$/,
use: [ {
loader: '@svgr/webpack',
options: {
dimensions: false,
expandProps: 'start'
}
} ]
} ]
2016-09-22 05:57:22 +00:00
},
node: {
// Allow the use of the real filename of the module being executed. By
// default Webpack does not leak path-related information and provides a
// value that is a mock (/index.js).
__filename: true
},
2018-12-03 13:39:37 +00:00
optimization: {
concatenateModules: minimize,
minimize
},
2016-09-22 05:57:22 +00:00
output: {
filename: `[name]${minimize ? '.min' : ''}.js`,
path: `${__dirname}/build`,
2016-12-09 01:17:49 +00:00
publicPath: '/libs/',
sourceMapFilename: `[name].${minimize ? 'min' : 'js'}.map`
2016-09-22 05:57:22 +00:00
},
plugins: [
analyzeBundle
&& new BundleAnalyzerPlugin({
analyzerMode: 'disabled',
generateStatsFile: true
}),
detectCircularDeps
&& new CircularDependencyPlugin({
allowAsyncCycles: false,
exclude: /node_modules/,
failOnError: false
})
].filter(Boolean),
2016-09-22 05:57:22 +00:00
resolve: {
alias: {
jquery: `jquery/dist/jquery${minimize ? '.min' : ''}.js`
2016-09-22 05:57:22 +00:00
},
2017-01-30 18:45:08 +00:00
aliasFields: [
'browser'
],
extensions: [
'.web.js',
// Webpack defaults:
'.js',
'.json'
]
2016-09-22 05:57:22 +00:00
}
};
2017-06-16 03:47:04 +00:00
module.exports = [
Object.assign({}, config, {
entry: {
'app.bundle': './app.js'
},
2020-05-18 12:07:09 +00:00
performance: getPerformanceHints(4 * 1024 * 1024)
}),
Object.assign({}, config, {
entry: {
'device_selection_popup_bundle': './react/features/settings/popup.js'
},
performance: getPerformanceHints(750 * 1024)
}),
Object.assign({}, config, {
entry: {
'alwaysontop': './react/features/always-on-top/index.js'
},
performance: getPerformanceHints(400 * 1024)
}),
Object.assign({}, config, {
entry: {
'dial_in_info_bundle': './react/features/invite/components/dial-in-info-page'
},
performance: getPerformanceHints(500 * 1024)
}),
Object.assign({}, config, {
entry: {
'do_external_connect': './connection_optimization/do_external_connect.js'
},
performance: getPerformanceHints(5 * 1024)
}),
Object.assign({}, config, {
entry: {
'flacEncodeWorker': './react/features/local-recording/recording/flac/flacEncodeWorker.js'
},
performance: getPerformanceHints(5 * 1024)
}),
Object.assign({}, config, {
entry: {
'analytics-ga': './react/features/analytics/handlers/GoogleAnalyticsHandler.js'
},
performance: getPerformanceHints(5 * 1024)
}),
// Because both video-blur-effect and rnnoise-processor modules are loaded
// in a lazy manner using the loadScript function with a hard coded name,
// i.e.loadScript('libs/rnnoise-processor.min.js'), webpack dev server
// won't know how to properly load them using the default config filename
// and sourceMapFilename parameters which target libs without .min in dev
// mode. Thus we change these modules to have the same filename in both
// prod and dev mode.
2019-06-28 17:18:47 +00:00
Object.assign({}, config, {
entry: {
2019-07-03 15:38:25 +00:00
'video-blur-effect': './react/features/stream-effects/blur/index.js'
2019-06-28 17:18:47 +00:00
},
output: Object.assign({}, config.output, {
library: [ 'JitsiMeetJS', 'app', 'effects' ],
libraryTarget: 'window',
filename: '[name].min.js',
sourceMapFilename: '[name].min.map'
}),
performance: getPerformanceHints(1 * 1024 * 1024)
2019-06-28 17:18:47 +00:00
}),
Object.assign({}, config, {
entry: {
'rnnoise-processor': './react/features/stream-effects/rnnoise/index.js'
},
output: Object.assign({}, config.output, {
library: [ 'JitsiMeetJS', 'app', 'effects', 'rnnoise' ],
libraryTarget: 'window',
filename: '[name].min.js',
sourceMapFilename: '[name].min.map'
}),
performance: getPerformanceHints(30 * 1024)
}),
Object.assign({}, config, {
entry: {
'external_api': './modules/API/external/index.js'
},
output: Object.assign({}, config.output, {
2017-06-16 03:47:04 +00:00
library: 'JitsiMeetExternalAPI',
libraryTarget: 'umd'
}),
performance: getPerformanceHints(30 * 1024)
})
];
2016-12-09 01:17:49 +00:00
/**
* Determines whether a specific (HTTP) request is to bypass the proxy of
* webpack-dev-server (i.e. is to be handled by the proxy target) and, if not,
* which local file is to be served in response to the request.
*
* @param {Object} request - The (HTTP) request received by the proxy.
* @returns {string|undefined} If the request is to be served by the proxy
* target, undefined; otherwise, the path to the local file to be served.
*/
function devServerProxyBypass({ path }) {
if (path.startsWith('/css/') || path.startsWith('/doc/')
|| path.startsWith('/fonts/')
|| path.startsWith('/images/')
2020-05-19 09:58:21 +00:00
|| path.startsWith('/lang/')
|| path.startsWith('/sounds/')
|| path.startsWith('/static/')
2019-11-06 09:25:08 +00:00
|| path.endsWith('.wasm')) {
2016-12-09 01:17:49 +00:00
return path;
}
const configs = module.exports;
/* eslint-disable array-callback-return, indent */
if ((Array.isArray(configs) ? configs : Array(configs)).some(c => {
if (path.startsWith(c.output.publicPath)) {
2016-12-09 01:17:49 +00:00
if (!minimize) {
// Since webpack-dev-server is serving non-minimized
// artifacts, serve them even if the minimized ones are
// requested.
2019-09-09 15:43:30 +00:00
return Object.keys(c.entry).some(e => {
const name = `${e}.min.js`;
2016-12-09 01:17:49 +00:00
if (path.indexOf(name) !== -1) {
// eslint-disable-next-line no-param-reassign
path = path.replace(name, `${e}.js`);
2016-12-09 01:17:49 +00:00
return true;
}
});
}
}
})) {
return path;
2016-12-09 01:17:49 +00:00
}
2019-10-09 08:27:45 +00:00
if (path.startsWith('/libs/')) {
return path;
}
2016-12-09 01:17:49 +00:00
}