MiniCssExtractPlugin 的 linkType 和 html-webpack-link-type-plugin 都不起作用

Question

请在下面找到我的 webpack 配置：

const LinkTypePlugin = require('html-webpack-link-type-plugin').HtmlWebpackLinkTypePlugin;
const path = require('path');
const webpack = require('webpack');
const FileManagerPlugin = require('filemanager-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = function(env) {
    const config = {};
    config.entry = {
        'apps/xyz': './apps/xyz/index.js',
    };

    config.mode = (env && env.NODE_ENV) || 'production';

    config.output = {
        path: path.resolve(__dirname, './dist'),
        filename: './[name]/bundle.[hash].js',
    };

    if (config.mode === 'development') {
        config.devtool = 'eval-source-map';
    } else {
        config.devtool = false;
    }

    config.module = {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /[\/]node_modules[\/]\.+/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            [
                                '@babel/preset-env',
                                {
                                    targets: 'defaults',
                                    useBuiltIns: 'entry',
                                    corejs: 3,
                                },
                            ],
                            '@babel/preset-react',
                        ],
                        plugins: [
                            '@babel/plugin-proposal-class-properties',
                            ...(config.mode === 'production'
                                ? [['transform-react-remove-prop-types', { removeImport: true }]]
                                : []),
                        ],
                    },
                },
            },
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
            // loader for processing sass templates used by react files
            {
                test: /\.(sass|scss|css)$/,
                exclude: /[\/]node_modules[\/]\.+/,
                use: [
                    config.mode === 'production'
                        ? {
                              loader: MiniCssExtractPlugin.loader,
                              options: { publicPath: '../' },
                          }
                        : 'style-loader',
                    'css-loader',
                    'sass-loader',
                ],
            },
            {
                test: /\.(jpe?g|png|gif|svg|bmp)$/i,
                loader: 'file-loader',
                options: {
                    name: './[path][hash].[ext]',
                    useRelativePaths: true,
                },
            },
        ],
    };

    config.resolve = {
        extensions: ['.tsx', '.ts', '.js'],
        alias: {
            src: path.resolve(__dirname),
        },
    };

    // Configure plugins
    config.plugins = [
        new CleanWebpackPlugin(),
        new webpack.ContextReplacementPlugin(/moment[/\]locale$/, /en-gb/),
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, './apps/xyz/index.html'),
            filename: 'apps/xyz/index.html',
            chunks: ['apps/xyz'],
            minify: {
                removeStyleLinkTypeAttributes: false,
                removeScriptTypeAttributes: false,
                collapseWhitespace: true,
                removeComments: true,
                removeRedundantAttributes: true,
                useShortDoctype: true,
            },
        }),
        new MiniCssExtractPlugin({
            filename: './[name]/main.[hash].css',
            chunkFilename: './[name]/main-[id].[hash].css',
            insert: 'text/css',
            linkType: 'text/css',
        }),
        new LinkTypePlugin({
            '**/*.css': 'text/css',
        }),
        new FileManagerPlugin({
            onEnd: [
                {
                    delete: ['../extension/public'],
                    copy: [
                        {
                            source: './dist/',
                            destination: '../extension/public/',
                        },
                    ],
                },
            ],
        }),
    ];

    // Adding new version of uglifyjs plugin as required by other packages
    if (env && env.NODE_ENV === 'production') {
        config.plugins.push(new UglifyJSPlugin());
    }

    return config;
};

生成的 index.html 文件附加了 CSS，但没有 type=text/css，我需要它来实现严格的类型兼容性。请帮忙。

Answer 1

问题是我在 LinkTypePlugin **/*.css 中指定的 glob 不是一个全面的场景。我将其更改为 ./**/*.css 并且有效！

关键是看生成的index.html。注入的 links 的 href 或 src 将有助于定义您的 glob 模式。

在生成文件的路径不是很直接的情况下，MiniCssExtractPlugin 无能为力。

MiniCssExtractPlugin 的 linkType 和 html-webpack-link-type-plugin 都不起作用

Neither MiniCssExtractPlugin's linkType nor html-webpack-link-type-plugin is working

javascript

reactjs

webpack

html-webpack-plugin

mini-css-extract-plugin