mirror of
https://github.com/NativeScript/NativeScript.git
synced 2025-08-15 19:26:42 +08:00
fix(webpack): --env.uglify works properly now (#9165)
This commit is contained in:
Nathanael Anderson
committed by
GitHub
GitHub
parent
04a76415b7
commit
be52cefe67
@ -2,87 +2,86 @@
|
||||
* @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 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;
|
||||
env = env || {};
|
||||
const hmr = env.hmr;
|
||||
const production = env.production;
|
||||
const isAnySourceMapEnabled = !!env.sourceMap || !!env.hiddenSourceMap;
|
||||
|
||||
const baseConfig = webpackConfig(env);
|
||||
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);
|
||||
/** 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)$/;
|
||||
/**
|
||||
* 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";
|
||||
/** 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"),
|
||||
}),
|
||||
);
|
||||
/** 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"));
|
||||
}
|
||||
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;
|
||||
};
|
||||
return baseConfig;
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user