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

问题描述

请在下面找到我的 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)$/,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，我需要严格的类型兼容性。请帮忙。

解决方法

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

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

如果生成的文件的路径不是很直接，MiniCssExtractPlugin 就无能为力。