HtmlWebpackPlugin 忽略文件名

Question

我正在使用webpack尝试代码/捆绑拆分，但是我遇到了问题。据我所知，HTMLWebpackPlugin应该动态地将脚本标签插入HTML文件中。默认情况下，此HTML文件为index.html，当我使用默认文件时，它似乎可以正常工作。因为我使用带有_Layout.cshtml和Index.cshtml的.NET，所以我希望它使用Index.cshtml。

HTMLWebpackPlugin似乎完全忽略了“filename”中的内容，并生成一个index.html：

new HtmlWebpackPlugin({
        template: '../../Views/Shared/_Layout.cshtml',
        filename: 'test-index.html' // Generates index.html, not test-index.html...
        //filename: '../Views/Home/Index.cshtml' // Not working either. Generates index.html
    })

webpack.common.js:

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var helpers = require('./helpers');

module.exports = {
    entry: {
        'polyfills': './ClientApp/polyfills.ts',
        'vendor': './ClientApp/vendor.ts',
        'app': './ClientApp/main.ts'
    },

    resolve: {
        extensions: ['.ts', '.js']
    },

    module: {
        rules: [
            {
                test: /\.ts$/,
                loaders: [
                    {
                        loader: 'awesome-typescript-loader',
                        options: { configFileName: helpers.root('ClientApp', 'tsconfig.json') }
                    } , 'angular2-template-loader'
                ]
            },
            {
                test: /\.html$/,
                use: ['raw-loader']
            },
            {
                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                loader: 'file-loader?name=assets/[name].[hash].[ext]'
            },
            {
                test: /\.css$/,
                include: helpers.root('ClientApp', 'app'),
                use: ['to-string-loader', 'css-loader']
            }
        ]
    },

    optimization:
    {
        runtimeChunk: 'single',
        splitChunks: {
            chunks: 'all',
            maxInitialRequests: Infinity,
            minSize: 0,
            cacheGroups: {
                vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    name(module) {
                        // get the name. E.g. node_modules/packageName/not/this/part.js
                        // or node_modules/packageName
                        const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];

                        // npm package names are URL-safe, but some servers don't like @ symbols
                        return `npm.${packageName.replace('@', '')}`;
                    },
                },
            }
        }
    },

    plugins: [    
        new webpack.ContextReplacementPlugin(
            /angular(\\|\/)core(\\|\/)(@angular|fesm5)/,
            helpers.root('ClientApp'),
            {}
        ),

        new webpack.BannerPlugin('© COPYRIGHT LIGHTHOUSE INTELLIGENCE ' + new Date().getFullYear()),

        new HtmlWebpackPlugin({
            template: '../../Views/Shared/_Layout.cshtml',
            filename: 'test-index.html' // Generates index.html, not test-index.html...
            //filename: '../Views/Home/Index.cshtml' // Not working either
        })
    ]
};

webpack.dev.js:

var webpackMerge = require('webpack-merge');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var commonConfig = require('./webpack.common.js');
var helpers = require('./helpers');

module.exports = webpackMerge(commonConfig, {
    devtool: 'cheap-module-eval-source-map',
    mode: "development",
    output: {
        path: helpers.root('/wwwroot/dist'),
        publicPath: '/wwwroot/dist/',
        filename: '[name].js', //.[hash]
        chunkFilename: '[id].js' //.chunk
    },

    plugins: [
        new ExtractTextPlugin('[name].css'),
    ],

    devServer: {
        historyApiFallback: true,
        stats: 'minimal'
    }
});

- Jasper

Answer 1

我认为你不能这样做。Razor cshtml文件需要在构建和运行项目之前将所有内容包含在视图中，以便它可以构建并将cshtml转换为html。

htmlwebpackplugin只能与html一起使用，因此您唯一的选择是在您的.NET Core项目中提供html文件。

- Tony Ngo

Answer 2

输出文件的位置由 webpack.config.js 的 output 属性确定（路径：helpers.root('/wwwroot/dist')）。因此，您只需为 filename 属性指定文件名即可。

- Chim