在webpack dist中输出多个CSS文件

发布时间:2020-07-07 17:49

我已经为我的项目设置了webpack-当前,它将CSS主文件从src文件夹传递到dist文件夹,但是,我不确定如何生成主css文件以及标准化css文件(或者甚至有可能,但是我相信应该如此。

我当前的文件夹设置如下:

enter image description here

styles.css和normalize.css都直接存在于根目录中-npm run build完成后,我的dist文件夹中没有normalize文件吗?

enter image description here

我的webpack配置文件如下:

    const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
  entry: {
    index: './src/js/index.js',
    // instafeed: './src/js/modules/instafeed.js',
    reviews: './src/js/modules/reviews.js'
  },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    plugins: [
                new MiniCssExtractPlugin('styles.css'),
                // new ExtractTextPlugin('styles.css'),
                new OptimizeCssAssetsPlugin({
                assetNameRegExp: /\.optimize\.css$/g,
                cssProcessor: require('cssnano'),
                cssProcessorPluginOptions: {
                    preset: ['default', { discardComments: { removeAll: true } }],
                },
                canPrint: true
                }),
                new HtmlWebpackPlugin({
                    template: './src/index.html',
                    favicon: './src/img/logos/favIcon.png',
                    minify: true,
                    cache: true
                })
    ],
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: [MiniCssExtractPlugin.loader, 'css-loader'],
                // loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
            },
            {
                test: /\.(png|jpe?g|gif|svg)$/,
                use: [
                    {
                        loader: "file-loader?name=[name].[ext]",
                        options: {
                            outputPath: 'images'
                        }
                    }  
                ]
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf|webp)$/,
                use: [
                    {
                    loader: 'file-loader',
                    options: {
                    outputPath: 'fonts'
                }
                }
            ]
            }
        ]
    }
};

真的很感谢您对此主题的任何帮助-预先感谢您- 沃利

p.s。

作为对此的附带说明,dist文件中的所有图像都被命名​​为哈希文件,有没有一种方法可以防止这种情况,因为我无法找出问题的原因:我认为这是因为我曾告诉过要对图像进行哈希处理的webpack配置,但我无法解决此问题-

回答1