mirror of
https://github.com/NativeScript/NativeScript.git
synced 2025-08-15 11:01:21 +08:00
88 lines
3.4 KiB
JavaScript
88 lines
3.4 KiB
JavaScript
/**
|
|
* @see https://github.com/NativeScript/NativeScript/tree/feat/ns7-finishing-touches/packages/webpack/templates
|
|
* @see https://github.com/NativeScript/NativeScript/pull/8801/files
|
|
*/
|
|
const webpackConfig = require('./webpack.typescript');
|
|
const webpack = require('webpack');
|
|
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
|
|
|
|
module.exports = (env) => {
|
|
env = env || {};
|
|
const hmr = env.hmr;
|
|
const production = env.production;
|
|
const isAnySourceMapEnabled = !!env.sourceMap || !!env.hiddenSourceMap;
|
|
|
|
const baseConfig = webpackConfig(env);
|
|
|
|
/** Find the rule for transpiling ts files ("ts-loader"), and modify it to test for .tsx files too. */
|
|
const tsxRule = baseConfig.module.rules.find((rule) => rule.use && rule.use.loader === 'ts-loader');
|
|
tsxRule.test = /\.(ts|tsx)$/;
|
|
tsxRule.use = [
|
|
/**
|
|
* Add React Refresh HMR support.
|
|
* @see https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/55028c6355b31e697e21bf3e9a48613a7b94bee7/examples/typescript-without-babel/webpack.config.js#L18-L21
|
|
*/
|
|
hmr &&
|
|
!production && {
|
|
loader: 'babel-loader',
|
|
options: {
|
|
sourceMaps: isAnySourceMapEnabled ? 'inline' : false,
|
|
babelrc: false,
|
|
plugins: ['react-refresh/babel'],
|
|
},
|
|
},
|
|
tsxRule.use,
|
|
].filter(Boolean);
|
|
|
|
/**
|
|
* Modify "nativescript-dev-webpack/hmr/hot-loader" to test for .tsx files
|
|
* (and also js files, which it should have been doing to begin with!)
|
|
*/
|
|
const nativeScriptDevWebpackHotLoader = baseConfig.module.rules.find((rule) => rule.use === '@nativescript/webpack/hmr/hot-loader');
|
|
nativeScriptDevWebpackHotLoader.test = /\.(ts|tsx|js|css|scss|html|xml)$/;
|
|
|
|
/** We don't officially support JSX. Makes the webpack config rather more complicated to set up. */
|
|
baseConfig.resolve.extensions = ['.tsx', ...baseConfig.resolve.extensions];
|
|
baseConfig.resolve.alias['react-dom'] = 'react-nativescript';
|
|
|
|
/** Augment NativeScript's existing DefinePlugin definitions with a few more of our own. */
|
|
const existingDefinePlugin = baseConfig.plugins.find((plugin) => plugin && plugin.constructor && plugin.constructor.name === 'DefinePlugin');
|
|
baseConfig.plugins.splice(
|
|
baseConfig.plugins.indexOf(existingDefinePlugin),
|
|
1,
|
|
new webpack.DefinePlugin({
|
|
...existingDefinePlugin.definitions,
|
|
/** For various libraries in the React ecosystem. */
|
|
__DEV__: production ? 'false' : 'true',
|
|
__TEST__: 'false',
|
|
/**
|
|
* Primarily for React Fast Refresh plugin, but technically the allowHmrInProduction option could be used instead.
|
|
* Worth including anyway, as there are plenty of Node libraries that use this flag.
|
|
*/
|
|
'process.env.NODE_ENV': JSON.stringify(production ? 'production' : 'development'),
|
|
})
|
|
);
|
|
|
|
if (hmr && !production) {
|
|
baseConfig.plugins.push(
|
|
new ReactRefreshWebpackPlugin({
|
|
/**
|
|
* Maybe one day we'll implement an Error Overlay, but the work involved is too daunting for now.
|
|
* @see https://github.com/pmmmwh/react-refresh-webpack-plugin/issues/79#issuecomment-644324557
|
|
*/
|
|
overlay: false,
|
|
/**
|
|
* If you (temporarily) want to enable HMR on a production build:
|
|
* 1) Set `forceEnable` to `true`
|
|
* 2) Remove the `!production` condition on `tsxRule` to ensure that babel-loader gets used.
|
|
*/
|
|
forceEnable: false,
|
|
})
|
|
);
|
|
} else {
|
|
baseConfig.plugins = baseConfig.plugins.filter((p) => !(p && p.constructor && p.constructor.name === 'HotModuleReplacementPlugin'));
|
|
}
|
|
|
|
return baseConfig;
|
|
};
|