如何排除CSS块文件的创建？

问题描述 投票：0回答：1

我有一个项目，我必须将所有模块构建到一个文件中，并将其拆分为多个模块。 但除了一个常见的模块之外，我不需要模块的 css 文件。

我的文件：

文件“a.js”

import 'a.css';
import b from 'b.js';
import c from 'c.js';

// some code

文件“b.js”

import 'b.css';
import d from 'd.js';

// some code

文件“c.js”

import 'c.css';
import e from 'e.js';

// some code

文件“d.js”

import 'd.css';

// some code

文件“e.js”

import 'e.css';

// some code

我的'webpack.config.js'

module.exports = {
    entry: {
        main: './src/a.js',
        
        c: {
            import: './src/c.js',
        },
        
        b: {
            import: './src/b.js',
        },

        a: {
            import: './src/a.js',
            dependOn: ['b', 'c']
        }
    },
    output: {
        filename: (pathData) => {
            if (pathData.chunk.name === 'main') {
                return '[name].js';
            }

            return 'modules/[name].js';
        },
        path: path.resolve(__dirname, 'dist')
    },

    optimization: {
        splitChunks: {
            chunks: chunk => chunk.name !== 'main'
        }
    },

    devtool: 'inline-source-map',

    module: {
        rules: [
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.scss$/i,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: ['autoprefixer']
                            },
                        },
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sassOptions: {
                                outputStyle: 'expanded'
                            }
                        }
                    }
                ],
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: (pathData) => {
                return pathData.chunk.name === 'main' ? 'main.css' : 'modules/[name].css';
            },
        })
    ]
};

我的“dist”目录

dist:
    main.js
    main.css
    modules:
        a.js
        a.css
        b.js
        b.css
        c.js
        c.css

我希望 MiniCssExtractPlugin 不会创建 'modules/a.css', 'modules/b.css', 'modules/c.css' 文件

dist:
    main.js
    main.css
    modules:
        a.js
        b.js
        c.js
javascript webpack webpack-5 css-loader mini-css-extract-plugin
1个回答
0
投票

请参阅 将所有 CSS 提取到单个文件中

可以使用 

optimization.splitChunks.cacheGroups
将 CSS 提取到一个 CSS 文件中。

例如

项目结构：

$ tree -L 3 -I node_modules
.
├── dist
│   ├── main.css
│   ├── main.js
│   └── modules
│       ├── a.js
│       ├── b.js
│       └── c.js
├── package-lock.json
├── package.json
├── src
│   ├── a.css
│   ├── a.js
│   ├── b.css
│   ├── b.js
│   ├── c.css
│   ├── c.js
│   ├── d.css
│   ├── d.js
│   ├── e.css
│   └── e.js
└── webpack.config.js

注意：模块路径应以

./
开头，如
./a.css
和
./b.js
。如果您像这样导入模块
import b from 'b'
，
'b'
将被视为模块请求并在模块目录中解析（
node_modules
）

规则 1.

应在当前目录中解析的请求需要以“./”开头

规则 2.

以名称开头的请求被视为模块请求并在模块目录中解析 (

node_modules
)

src/a.js
：

import 'a.css';
import b from './b.js';
import c from './c.js';


src/b.js
：

import './b.css';
import d from './d.js';

export default 'b';


src/c.js
：

import './c.css';
import e from './e.js';

export default 'c';


src/d.js
：

import './d.css';
export default 'd';


src/e.js
：

import './e.css';

export default 'e';


src/a.css
：

.a {
    color: aqua;
}


src/b.css
：

.b {
    color: bisque;
}


src/c.css
：

.c {
    color: cadetblue;
}


src/d.css
：

.d {
    color: yellow;
}


src/e.css
：

.e {
    color: slateblue;
}


webpack.config.js
：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');

module.exports = {
    mode: 'production',
    entry: {
        main: './src/a.js',
        c: {
            import: './src/c.js',
        },

        b: {
            import: './src/b.js',
        },

        a: {
            import: './src/a.js',
            dependOn: ['b', 'c'],
        },
    },
    output: {
        filename: (pathData) => {
            if (pathData.chunk.name === 'main') {
                return '[name].js';
            }
            return 'modules/[name].js';
        },
        path: path.resolve(__dirname, 'dist'),
        clean: true,
    },
    optimization: {
        splitChunks: {
            chunks: (chunk) => chunk.name !== 'main',
            cacheGroups: {
                styles: {
                    name: 'styles',
                    type: 'css/mini-extract',
                    chunks: 'all',
                    enforce: true,
                },
            },
        },
    },
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: [MiniCssExtractPlugin.loader, 'css-loader'],
            },
        ],
    },
    plugins: [new MiniCssExtractPlugin({ filename: 'main.css' })],
};

构建日志：

> webpack

assets by path modules/*.js 1.98 KiB
  asset modules/b.js 946 bytes [compared for emit] [minimized] (name: b)
  asset modules/c.js 946 bytes [compared for emit] [minimized] (name: c)
  asset modules/a.js 134 bytes [compared for emit] [minimized] (name: a)
asset main.js 950 bytes [compared for emit] [minimized] (name: main)
asset main.css 124 bytes [compared for emit] (name: styles) (id hint: styles)
Entrypoint main 1.05 KiB = main.css 124 bytes main.js 950 bytes
Entrypoint c 1.04 KiB = main.css 124 bytes modules/c.js 946 bytes
Entrypoint b 1.04 KiB = main.css 124 bytes modules/b.js 946 bytes
Entrypoint a 258 bytes = main.css 124 bytes modules/a.js 134 bytes
orphan modules 4.83 KiB (javascript) 4.58 KiB (runtime) [orphan] 34 modules
runtime modules 7.39 KiB 9 modules
cacheable modules 119 bytes (css/mini-extract) 192 bytes (javascript)
  modules by path ./src/*.css 119 bytes
    css ./node_modules/css-loader/dist/cjs.js!./src/a.css 21 bytes [built] [code generated]
    css ./node_modules/css-loader/dist/cjs.js!./src/b.css 23 bytes [built] [code generated]
    css ./node_modules/css-loader/dist/cjs.js!./src/c.css 26 bytes [built] [code generated]
    css ./node_modules/css-loader/dist/cjs.js!./src/d.css 23 bytes [built] [code generated]
    css ./node_modules/css-loader/dist/cjs.js!./src/e.css 26 bytes [built] [code generated]
  javascript modules 192 bytes
    ./src/a.js 66 bytes [built] [code generated]
    ./src/c.js 63 bytes [built] [code generated]
    ./src/b.js 63 bytes [built] [code generated]
webpack 5.88.2 compiled successfully in 301 ms

输出

dist/main.css
：

.a {
    color: aqua;
}

.b {
    color: bisque;
}

.d {
    color: yellow;
}

.c {
    color: cadetblue;
}

.e {
    color: slateblue;
}


package.json
：

{
    "version": "1.0.0",
    "scripts": {
        "build": "webpack"
    },
    "devDependencies": {
        "css-loader": "^6.8.1",
        "mini-css-extract-plugin": "^2.7.6",
        "webpack": "^5.80.0",
        "webpack-cli": "^5.0.2"
    }
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.