Question

我的项目中有2个入口点：登录和 index 。我想生成2个具有以下注入内容的html文件： index.html：index.hash.js + index.hash.css login.html：login.hash.js + login.hash.css

获得以下Webpack配置：

module.exports = (env, options) => {
    let development = options.mode !== 'production';

    const config = {
        entry: {
            login: ['./src/Login/index.js'],
            index: ['./src/Main/index.js'],
        },
        output: {
            path: path.resolve(__dirname, './dist'),
            filename: '[name].[hash:8].js',
        },
        devServer: {
            overlay: true,
            open: 'login.html',
        },
        module: {
            // too many rows here
        },
        plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].[hash:8].css',
        }),
        new HtmlWebpackPlugin({
            template: 'public/login.html',
            filename: 'login.html',
        }),
        new HtmlWebpackPlugin({
            template: 'public/index.html',
            filename: 'index.html',
        }),
        new CleanWebpackPlugin(['dist'])
        ],
        devtool: development ? 'source-map' : false,
    };

    return config;
};

因此，我有2个html文件，其中包含2个相同的注入脚本和样式表（每个html文件中都包含index.hash.js，index.hash.css，login.hash.js和login.hash.css）。

如何选择要注入的脚本？谁能分享解决方案？预先感谢！

HtmlWebPackPlugin选择要注入的js和CSS

0 个答案: