希望webpack输出到单独的.css文件，而不是合并为一个文件

如何解决希望webpack输出到单独的.css文件，而不是合并为一个文件

我正在使用MiniCssExtractPlugin，并且还为优化指定了一些块：

splitChunks: {
            cacheGroups: {
                styles: {
                    name: 'styles',test: /\.css$/,chunks: 'all',enforce: true,},

我相信这些块会导致我的两个墨水CSS在dev或prod构建之后合并为styles。[hash] .css文件：

import '../../ext/ink-3.1.10/css/ink.min.css';
import '../../ext/ink-3.1.10/css/ink-flex.min.css';

index.tsx

import { render } from 'react-dom';
import React from 'react';
import { Provider } from 'react-redux';
import App from './App';
import '../../ext/ink-3.1.10/css/ink.min.css';
import '../../ext/ink-3.1.10/css/ink-flex.min.css';
import './less/master.less';
import store from './store';
import { BrowserRouter as Router } from 'react-router-dom';

const globalAny: any = global;
globalAny.__base = `${__dirname}/`;


render(
    <Provider store={store}>
        <Router>
            <App />
        </Router>
    </Provider>,document.getElementById('app')
);

但是我不想合并ink文件。但是，如果我取出一些块，那么我的构建将不再包含两个墨水css文件：

如果我保留优化块，那么它将把这两个墨水文件组合成一个样式[hash] .css，这样做会在我运行站点时引起奇怪的样式问题。

我是webpack的新手，所以不要以为我完全知道我100％正在做什么。

如何更改此设置以为这些墨水文件输出两个单独的CSS文件？

webpack.config.js

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');

const isProduction = process.env.NODE_ENV === 'production';

const html = () =>
    new HtmlWebPackPlugin({
        template: path.resolve(__dirname,'src/client','index.html'),filename: 'index.html',hash: true,});

const copyAllOtherDistFiles = () =>
    new CopyPlugin({
        patterns: [
            { from: 'src/client/assets',to: 'lib/assets' },{ from: 'package.json',to: './' },{ from: 'ext/ink-3.1.10/js/ink-all.min.js',to: 'lib/js' },{ from: 'ext/ink-3.1.10/js/autoload.min.js',{ from: 'ext/js/jquery-2.2.3.min.js',{ from: 'feed.xml',],});

module.exports = {
    entry: './src/client/index.tsx',output: {
        filename: 'scripts/app.[hash].bundle.js',publicPath: '/',path: path.resolve(__dirname,'dist'),resolve: {
        extensions: ['.ts','.tsx','.js'],devtool: 'source-map',devServer: {
        open: true,writeToDisk: false,compress: true,historyApiFallback: {
            index: '/',stats: 'errors-only',proxy: {
            '/api': {
                target: 'http://localhost:3000',secure: false,changeOrigin: true,logLevel: 'debug',optimization: {
        minimizer: [new TerserJSPlugin({}),new OptimizeCSSAssetsPlugin({})],splitChunks: {
            cacheGroups: {
                styles: {
                    name: 'styles',module: {
        rules: [
            {
                test: /\.(js)$/,exclude: /node_modules/,use: {
                    loader: 'babel-loader',{
                test: /\.(tsx|ts)?$/,use: 'ts-loader',{
                test: /\.html$/,use: [
                    {
                        loader: 'html-loader',{
                test: /\.less$/,use: [MiniCssExtractPlugin.loader,'css-loader','less-loader'],{
                test: /\.css$/,use: [
                    {
                        loader: MiniCssExtractPlugin.loader,options: {
                            publicPath: '../../',{
                test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,loader: 'url-loader?limit=10000&mimetype=application/font-woff',{
                test: /\.(png|svg|jpg|gif)$/,use: ['url-loader'],plugins: isProduction
        ? [
                new CleanWebpackPlugin(),copyAllOtherDistFiles(),new MiniCssExtractPlugin({
                    filename: 'lib/css/[name].[hash].css',}),html(),]
        : [
                copyAllOtherDistFiles(),};

更新：

现在唯一的事情是：

1. 墨迹css文件也位于root的{​​{1}}中吗？似乎出于某种原因，它仍将其放入我的lib/css和ext中，而不是放在我的__dirname CSS旁边的lib\css旁边。

2. 好像我要弄糊了所创建的墨水CSS？它在和脚本中，好像是作为路径的一部分附加到应用程序捆绑包中吗？似乎很奇怪

3. 我需要生成2个墨水文件并将其包含在main中。将这两个墨水css文件（index.html和墨水flex）组合到一个 ink css文件中。那给我带来了麻烦。看起来分块逻辑是否还没有为ink中包含的文件创建单独的文件？

webpack.config.js

index.tsx

我console.log在此处找到了匹配项以尝试进行故障排除：

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');

const isProduction = process.env.NODE_ENV === 'production';

const html = () =>
    new HtmlWebPackPlugin({
        template: path.resolve(__dirname,splitChunks: {
            cacheGroups: {
                styles: {
                    name(module) {
                        const match = module.context.match(/[\\/](.*).css/);

                        if (!match) {
                            return false;
                        }

                        const moduleName = match[1];

                        return moduleName;
                    },};

解决方法

请尝试更改您的cacheGroup name配置：

splitChunks: {
   cacheGroups: {
      styles: {
          name(module) {
             const match = module.context.match(/[\\/](.*).css/);

             if (!match) {
                return false;
             }

             const moduleName = match[1];

             return moduleName;
          },test: /\.css$/,chunks: 'all',enforce: true,},

通过定义name: 'styles'，您告诉webpack，每个导入并匹配/\.css$/正则表达式的模块都应包装在名为“样式”的一个块中。

cacheGroup 的 name 属性也可以是一个函数。 此函数获取 module （对象在给定文件中包含大量数据）并执行以下操作：

1. 如果返回false，则：-不将此模块（文件）添加到此块组中。
2. 如果返回字符串-将模块（文件）推送到具有该名称的块中。

因此，根据一个文件的返回内容，您可以从一个缓存组中生成多个块。