Webpack，使用MiniCssExtractPlugin为每个导入的CSS文件生成单独的CSS文件

Question

我是Webpack(和开发)的新手，我试图弄清楚如何使用Webpack和一些插件将任何CSS导入分离到单个CSS链接标签。

这是我的webpack-config.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
mode: 'development',
devtool: 'inline-source-map',
entry: {
index: ['./src/assets/js/script.js'],
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'assets/js/[name].bundle.js',
assetModuleFilename: 'assets/images/[name][ext][query]',
clean: true,
},
plugins: [
new HtmlWebpackPlugin({
chunks: ['index'],
title: "~we don't talk about bruno~",
filename: 'index.html',
template: './src/index.html',
}),
new MiniCssExtractPlugin({
filename: 'assets/css/[name].css',
}),
],
module: {
rules: [
{
test: /.css$/i,
use: [
// 2. remove CSS from JS and save into an external file
{ loader: MiniCssExtractPlugin.loader },
// 1. generate CSS into CommonJS
'css-loader',
],
},
{
test: /.scss$/i,
use: [
// 3. remove CSS from JS and save into an external file
{ loader: MiniCssExtractPlugin.loader },
// 2. generate CSS into CommonJS
'css-loader',
// 1. tranpile SCSS into CSS
'sass-loader',
],
},
{
test: /.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
},
],
},
};

这是我的JavaScript文件:

import '../css/style.scss';
import 'animate.css';

我知道Webpack是一个捆绑器，我理解它，但是否有可能单独生成index.css和animate.css并将其链接到HTML?或者可以使用另一个插件，并在Webpack配置中指定animate.css。

Answer 1

解决方案

您可以使用webpack.config.js的optimization条目。您可以在plugins数组之后的webpack.config.js中添加此条目，例如:

optimization: {
moduleIds: "deterministic",
splitChunks: {
cacheGroups: {
styles: {
test: /animate.css/
name: "animate",
type: "css/mini-extract",
chunks: "all",
enforce: true,
},
},
},
},

上述配置将为animate.css生成一个单独的文件。但是，它不会为每个CSS文件导入生成一个单独的CSS文件。这与模块绑定器的作用正好相反。

<标题>更多h1> 常我们所做的是将我们编写的代码与来自node_modules的代码分开，使用以下配置:

optimization: {
moduleIds: "deterministic",
splitChunks: {
chunks: "all",
cacheGroups: {
vendor: {
test: /[\/]node_modules[\/]/,
name: "vendors",
chunks: "all",
},
styles: {
test: /[\/]node_modules[\/]/,
name: "vendors",
type: "css/mini-extract",
chunks: "all",
enforce: true,
},
},
},
},

这样，除了你通常拥有的，你从node_modules得到vendors.js和vendors.css。查看Webpack官方文档中的代码拆分了解更多信息。