Question

我使用netcore2和reactjs + redux创建了一个项目

该项目运行良好，但是我做了些小事情。

我所做的更改是，控制器将视图作为actionResult返回，相反，我想返回确定的Badrequest结果。

因此，我不需要它自己的项目随附的视图，而是在ClientApp文件夹下制作了一个index.html文件，其内容如下：

ClientApp / index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React + Redux - User Registration and Login Example & Tutorial</title>
    <!--<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />-->
    <style>
        a {
            cursor: pointer;
        }

        .help-block {
            font-size: 12px;
        }
    </style>

    <link rel="stylesheet" href="/dist/vendor.css" asp-append-version="true" />
</head>
<body>
    <div id="react-app" asp-prerender-module="/dist/main-server.js"></div>

</body>
</html>

在应用程序的构建过程中，它将在wwwroot / dist下生成index.html文件，如下所示：

wwwroot / dist / index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React + Redux - User Registration and Login Example & Tutorial</title>
    <!--<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />-->
    <style>
        a {
            cursor: pointer;
        }

        .help-block {
            font-size: 12px;
        }
    </style>

    <link rel="stylesheet" href="/dist/vendor.css" asp-append-version="true" />
    <link rel="stylesheet" href="/site.css" asp-append-version="true" />
</head>
<body>
    <div id="react-app" asp-prerender-module="/dist/main-server.js"></div>
    <link rel="stylesheet" href="/main-client.js" asp-append-version="true" />
</body>
</html>

您会注意到main-client.js由构建自动添加的site.css路径错误，应在/ dist /作为主服务器和vendor.css前缀

以下是我对webpack的配置

webpack.configuration.js

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
const merge = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = (env) => {
    const isDevBuild = !(env && env.prod);

    // Configuration in common to both client-side and server-side bundles
    const sharedConfig = () => ({
        stats: { modules: false },
        resolve: { extensions: ['.js', '.jsx', '.ts', '.tsx'] },
        output: {
            filename: '[name].js',
            publicPath: '/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
        },
        module: {
            rules: [
                { test: /\.tsx?$/, include: /ClientApp/, use: 'awesome-typescript-loader?silent=true' },
                { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
            ]
        },
        plugins: [new CheckerPlugin()]
    });

    // Configuration for client-side bundle suitable for running in browsers
    const clientBundleOutputDir = './wwwroot/dist';
    const clientBundleConfig = merge(sharedConfig(), {
        entry: { 'main-client': './ClientApp/boot-client.tsx' },
        module: {
            rules: [
                { test: /\.css$/, use: ExtractTextPlugin.extract({ use: isDevBuild ? 'css-loader' : 'css-loader?minimize' }) }
            ]
        },
        output: { path: path.join(__dirname, clientBundleOutputDir) },
        plugins: [
            new HtmlWebpackPlugin({
                filename: 'index.html',
                template: './ClientApp/index.html',
            }),
            new ExtractTextPlugin('site.css'),
            new webpack.DllReferencePlugin({
                context: __dirname,
                manifest: require('./wwwroot/dist/vendor-manifest.json')
            })
        ].concat(isDevBuild ? [
            // Plugins that apply in development builds only
            new webpack.SourceMapDevToolPlugin({
                filename: '[file].map', // Remove this line if you prefer inline source maps
                moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
            })
        ] : [
            // Plugins that apply in production builds only
            new webpack.optimize.UglifyJsPlugin()
        ])
    });

    // Configuration for server-side (prerendering) bundle suitable for running in Node
    const serverBundleConfig = merge(sharedConfig(), {
        resolve: { mainFields: ['main'] },
        entry: { 'main-server': './ClientApp/boot-server.tsx' },
        plugins: [
            new webpack.DllReferencePlugin({
                context: __dirname,
                manifest: require('./ClientApp/dist/vendor-manifest.json'),
                sourceType: 'commonjs2',
                name: './vendor'
            })
        ],
        output: {
            libraryTarget: 'commonjs',
            path: path.join(__dirname, './ClientApp/dist')
        },
        target: 'node',
        devtool: 'inline-source-map'
    });

    return [clientBundleConfig, serverBundleConfig];
};

我做错了什么，请注意我正在使用HtmlWebpackPlugin

谢谢

webpack为main-client.js生成错误路径的index.html文件

0 个答案: