Webpack MiniCssExtractPlugin - ошибка при использовании нескольких точек входа - PullRequest
Новая
       19

Webpack MiniCssExtractPlugin - ошибка при использовании нескольких точек входа

0 голосов
/ 10 марта 2020

Я заранее извинюсь за плохой вопрос. Я так потерян в этой теме, я не знаю, как быть более точным c, но я отвечу на вопросы и добавлю подробности, если кто-то думает, что они могут помочь.

Я создаю анимированные баннеры ( HTML / CSS / JS). Каждый проект включает в себя несколько форматов, которые используют много кода и стилей, поэтому я настроил каждый формат в отдельной подпапке - ./src/templates/format1, ./src/templates/format2 et c.

Я настроил Webpack с записью указать для каждого формата, и он правильно генерирует каждый в ./dist при запуске.

Я использую html-webpack-plugin и copy-webpack-plugin без проблем, но теперь я попытался добавить mini-css-extract-plugin и Я получаю следующую ошибку 

ERROR in chunk svg-resize [entry]
grid-display-01/grid-display-01.css
Conflict: Multiple chunks emit assets to the same filename grid-display-01/grid-display-01.css (chunks grid-display-01 and svg-resize).

svg-resize и grid-display-01 являются именами двух моих форматов тестирования. У каждого есть точка входа и экземпляр трех плагинов (html, копия и мини Css). Каждый создается в ./dist, НО svg-resize не имеет файла. js, и он. css (хотя и с правильным именем) является дубликатом другого формата. css

Когда я удаляю mini- css -extract-plugin и просто используйте style-loader все работает нормально - за исключением, конечно, моего css не извлеченного.

I ' Я динамически генерирую точки входа и конфигурацию плагина, что может быть проблемой, но мой webpack.config. js выглядит так 

const path = require('path');
const fs = require('fs');
const htmlPlugin = require('html-webpack-plugin');
const copyPlugin = require('copy-webpack-plugin');
const minCss = require('mini-css-extract-plugin');

let configObj = {
    watch: true,
    entry: {},
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "[name]/[name].bundle.js",
        chunkFilename: '[id].[hash].js',
        libraryTarget: "var",
        library: 'DcoUtils'
    },
    module:{
        rules:[
            {
                test: /\.css$/i,
                exclude: [/\.\*\.DS_Store/],
                use: [minCss.loader, 'css-loader']
            },
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["@babel/preset-env"]
                    }
                }
            }
        ]
    },
    plugins: []
};

function getFileNames(){
    return new Promise((resolve, reject)=>{
        fs.readdir('./src/templates', (err, files)=>{
            resolve(files.filter(file=>file[0]!=='.'));//Return child dirs ignoring invisibles (.*)
        })
    });
}

function createDevConfig(){
    return getFileNames()
        .then(fileNames => {
            fileNames.forEach(item=>{
                console.log('Target build:', item);
                configObj.entry[item] = path.resolve(__dirname, path.join('src', 'templates', item, 'js', 'main.js')),
                configObj.plugins.push(
                    new htmlPlugin({
                        filename: path.join(item, 'index.html'),
                        template: path.join('src', 'templates', item, 'index.html'),
                        chunks: [item]
                    }),
                    new copyPlugin([
                        {from: path.join('src', 'images', 'logos'), to: path.join(item, 'images', 'logos')}
                    ]),
                    new minCss({
                        filename: path.join(item, item+'.css'),
                        publicPath: path.join(item, item+'.css')
                    })
                )
            });

            console.log(configObj.plugins);

            return configObj;
        })
}

module.exports = async (env, argv) => {
    if(argv.mode === 'production'){
        return 0;
    }
    else{
        return createDevConfig();
    }
};

Я знаю, что это ужасный вопрос. Я дам подробности, если у кого-то есть какие-то мысли, но веб-пакет для меня в значительной степени волшебный c, и я не знаю, как быть более точным c или что уместно. Я единственный разработчик в офисе, поэтому мне больше не с кем поговорить, и даже некоторые идеи о том, где искать, будут очень признательны.

Спасибо всем

...