Webpack: сторонняя библиотека в отдельный файл?

Question

[thehighhomie]

Помогите пожалуйста разобраться со сборкой внешних библиотек в свой файл.

К примеру есть много небольших файлов стилей и с помощью ExtractTextPlugin собираются в один файл.
Теперь когда я захотел подключить сторонюю библиотеку normalize.css, я остановился в непонятках, а именно не могу при с плагином ExtractTextPlugin вывести отдельно css файл с таким же именем - normalize.css

Конфик webpack'a:

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const extractCSS = new ExtractTextPlugin('css/[name].css');
const extractSASS = new ExtractTextPlugin('css/app.css');

module.exports = {

	entry: path.join(__dirname, 'src', 'index.js'),

	output: {
		path: path.join(__dirname, 'dist'),
		filename: 'bundle.js'
	},

	devtool: 'eval',

	module: {
		rules: [
			{
				test: /\.css$/,
				use: extractCSS.extract([ 'css-loader' ])
			},
			{
				test: /\.scss$/,
				use: extractSASS.extract([
					{
						loader: "css-loader",
						options: {
							modules: true,
							localIdentName: '[name]__[local]--[hash:base64:5]'
						}
					},
					{ loader: "sass-loader", }
				])
			},
			{
				test: /\.(png|jpg|jpeg|gif|svg)$/,
				use: [
					{
						loader: 'file-loader',
						options: {
							name: 'img/[name].[ext]'
						}
					}
				]
			},
			{
				test: /\.(js|jsx)$/,
				exclude: /node_modules/,
				loader: "babel-loader"
			}
		]
	},
	plugins: [
		extractCSS,
		extractSASS
	]

};

index.js:

import React, { Component } from 'react';
import { render } from 'react-dom';
import 'normalize.css';
import 'animate.css';
import './index.scss';
import App from './components/App/App.jsx';

render( <App />, document.getElementById('root') );

И проблема в том, что и normalize.css и animate.css собираются в один файл: main.js. WTF??? Не понимаю как-так, ведь при инициализации плагина я указал маску для генерации имен:

const extractCSS = new ExtractTextPlugin('css/[name].css');

Что за бред и как мне добиться результата? Даже локальные css файлы вместо внешних ставил и так же собираются в один main.js.

А с SASS файлами все ок, app.css собирается отлично.

Comments

[vasIvas]

А зачем уже собранные, тем более css собирать? Для сбора внешних js библиотек используйте DllBundlesPlugin, наикрутейшая вещь, а главное отделяет логику внешних библиотек от логики сборки проекта.

[thehighhomie]

vasIvas, Смотрите, мне нужно решить проблему. Библиотеки не единственный пример. Мне нужно чтобы каждый файл был собран со своим именем.

Смотрите какая ерунда, даже при минимуме настроек, скопированных с гитхаба самого плагина Extract Text Plugin:

webpack.config.js

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');


module.exports = {

	entry: {
		'app': path.join(__dirname, 'src', 'app.js')
	},

	output: {
		path: path.join(__dirname, 'dist'),
		filename: '[name].js'
	},

	module: {
		rules: [
		  {
			test: /\.css$/,
			use: ExtractTextPlugin.extract({
			  fallback: "style-loader",
			  use: "css-loader"
			})
		  }
		]
	  },
	  plugins: [
		new ExtractTextPlugin("[name].css"),
	  ]

};

app.js
import './qwerty.css';

qwerty.css

body {
	background: red;
}

и в папку dist попадают 2 файла: app.css и app.js

как я понял название файла app получается из за точки входа:

entry: {
		'app': path.join(__dirname, 'src', 'app.js')
	}

и если сделать так:
entry: path.join(__dirname, 'src', 'app.js')

то вместо app.css имя будет main.css.

И вот как теперь разобраться в этом? Раньше делал простые сборки и все было нормально, не понимаю что случилось, либо я что-то упустил, либо что-то в плагине поменялось...

[vasIvas]

Если Вам нужно конкретное имя css файла зачем шаблон задаете "[name].css"?

[thehighhomie]

vasIvas,

Смотрите, файлов может быть много и по этому я делаю маску, чтобы имя файла было такое как изначально. Тут пример c css и там и там, но это просто пример. Короче маска для того чтобы каждый файл был с именем, которое было изначально, а имя берется из точки входа, просто жесть, нет слов...

[vasIvas]

thehighhomie, тогда делайте несколько точек входа. сделайте массив путей и тогда имя файлов буте именем файла на выходе.

[thehighhomie]

vasIvas, ну это уже тупо)

[vasIvas]

thehighhomie, мнетакое не приходилось делать и проверить сейчас возможности нет. попробуйте вместо [name] написать [file] и скажите что получится :)

[thehighhomie]

vasIvas, не работает) ошибка)

[vasIvas]

thehighhomie, в доках говорят что можно динамически имя задавать. О результате тоже скажите. Самому интересно. Поставьте там console.log и посмотрите что туда вообще приходит.

[thehighhomie]

vasIvas, я видел это, но я вообще не пойму зачем там replace стоит, я не догоню, можете объяснить момент с реплейсом?

return getPath('css/[name].css').replace('css/js', 'css');

[vasIvas]

thehighhomie, меняет путь, а какой он я не знаю, так как ни разу такого не делал.

[thehighhomie]

vasIvas, блин(

[vasIvas]

thehighhomie, я не понимаю почему Вас не устраивает массив с ссылками на файлы, которые представляют точки входа? Как webpack должен понять какие файлы выносить, а какие нет? Если У Вас в index.js подключены только те, которые нужно выносить, то у меня не только.. А у других может быть иначе.