我发布了带有.net core 2.2的reactjs asp.net核心应用。
然后我在IIS的主网站文件夹下创建了一个网站,指向发布的文件夹,其中包含不受管理的应用程序池。
当我浏览该网站时,出现白屏。如果我检入chrome inspector,会看到以下警告
webpack.config.js内容:
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const useExperimentalFeatures =
process.env.CARBON_USE_EXPERIMENTAL_FEATURES === 'true';
const useBreakingChanges = process.env.CARBON_USE_BREAKING_CHANGES === 'true';
const useExternalCss =
process.env.CARBON_REACT_STORYBOOK_USE_EXTERNAL_CSS === 'true';
const useStyleSourceMap =
process.env.CARBON_REACT_STORYBOOK_USE_STYLE_SOURCEMAP === 'true';
const replaceTable = {
componentsX: true,
breakingChangesX: true,
};
const styleLoaders = [
{
loader: 'css-loader',
options: {
importLoaders: 2,
sourceMap: useStyleSourceMap,
},
},
{
loader: 'postcss-loader',
options: {
plugins: () => [
require('autoprefixer')({
browsers: ['last 1 version', 'ie >= 11'],
}),
],
sourceMap: useStyleSourceMap,
},
},
{
loader: 'sass-loader',
options: {
includePaths: [path.resolve(__dirname, '..', 'node_modules')],
data: `
$feature-flags: (
components-x: ${useExperimentalFeatures},
breaking-changes-x: ${useBreakingChanges},
grid: ${useExperimentalFeatures},
ui-shell: true,
);
`,
sourceMap: useStyleSourceMap,
},
},
];
module.exports = (baseConfig, env, defaultConfig) => {
defaultConfig.devtool = useStyleSourceMap ? 'source-map' : '';
defaultConfig.optimization = {
...defaultConfig.optimization,
minimizer: [
new TerserPlugin({
sourceMap: true,
terserOptions: {
mangle: false,
},
}),
],
};
defaultConfig.module.rules.push({
test: /(\/|\\)FeatureFlags\.js$/,
loader: 'string-replace-loader',
options: {
multiple: Object.keys(replaceTable).map(key => ({
search: `export\\s+const\\s+${key}\\s*=\\s*false`,
replace: `export const ${key} = ${replaceTable[key]}`,
flags: 'i',
})),
},
});
defaultConfig.module.rules.push({
test: /-story\.jsx?$/,
loaders: [
{
loader: require.resolve('@storybook/addon-storysource/loader'),
options: {
prettierConfig: {
parser: 'babylon',
printWidth: 80,
tabWidth: 2,
bracketSpacing: true,
trailingComma: 'es5',
singleQuote: true,
},
},
},
],
enforce: 'pre',
});
defaultConfig.module.rules.push({
test: /\.scss$/,
sideEffects: true,
use: [
{ loader: useExternalCss ? MiniCssExtractPlugin.loader : 'style-loader' },
...styleLoaders,
],
});
if (useExternalCss) {
defaultConfig.plugins.push(
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css',
})
);
}
return defaultConfig;
};