Получить один файл CSS из веб-пакета нескольких точек входа

Question

Я использую веб-пакет для своего проекта. У меня есть 2 точки входа: первая для CSS-файлов с модулями CSS, вторая - для глобальных CSS-файлов. Main.css не импортируется ни из одного файла в проекте, поэтому я создал для него специальную точку входа.

const extractStylesCss = new ExtractTextPlugin('styles.css');  

entry: {
    'main': ["./src/index.tsx"],
    'styles': "./src/main.css"
},
module: {
    loaders: [ 
        {
            test: /^.*\.css$/,
            exclude: [
                path.join(__dirname, 'src/main.css')
            ],

            loader: extractStylesCss.extract(
                "style",
                `css?modules&importLoaders=2&localIdentName=[local]___[hash:base64:5]___${pjson.version}!typed-css-modules!postcss?pack=pure&sourceMap=inline`
            )
        },
        {
            test: /main\.css$/,
            loader: extractStylesCss.extract('style', 'css!postcss?pack=pure&sourceMap=inline')
        },
    ]
},
plugins: [
    extractStylesCss
],
output: {
    path: path.join(__dirname, "/docs"),
    filename: "[name].js"
}

Мне нужен только один выходной файл - styles.css. Я знаю, что ExtractTextPlugin генерирует один пакет на точку входа, но есть ли возможность получить один файл?

Answer 1

У вас была правильная идея, добавив ее в запись, к сожалению, вы создали еще один пакет. Каждое свойство entry объект создает отдельный пакет, поэтому вы также получаете style.js хотя в нем есть только код начальной загрузки веб-пакета и extract-text-webpack-plugin просто перезаписывает файл CSS, если вы используете один и тот же выходной файл для обоих.

Что вы действительно хотите, это добавить main.css к основному пакету (концептуально он должен быть его частью, а не отдельным пакетом). Записи также принимают массив с несколькими точками входа. Со следующим entry CSS будет автоматически объединен:

entry: {
    main: ['./src/index.tsx', './src/main.css']
},