Когда я пытаюсь добавить sass-loader и запустить webpack, в папке dist есть несколько файлов chunck .css, а не только один в комплекте с именем "style.css".
Моя выходная папка dist выглядит так:
0.e749007119be51de03e4.js 1.e749007119be51de03e4.js bundle.e749007119be51de03e4.js
0.style.css 1.style.css
Я предполагаю, что это из-за плагина Mini-css-extract-plugin, но я не могу понять, как это исправить.
Вот мой файл webpack:
const webpack = require('webpack');
const { resolve } = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const ROOT = resolve(__dirname);
const SRC = resolve(ROOT, 'src');
module.exports = {
mode: 'development',
devtool: 'cheap-module-eval-source-map',
entry: {
bundle: [
'react-hot-loader/patch',
'webpack-hot-middleware/client?reload=true',
resolve(SRC, 'client', 'index.js'),
]
},
output: {
path: resolve(ROOT, 'dist', 'client'),
filename: '[name].[hash].js',
publicPath: '/'
},
module: {
rules: [
{
test: /\.js$/,
use: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
include: resolve(__dirname, 'node_modules', 'react-toolbox'),
use: [
MiniCssExtractPlugin.loader,
// 'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
sourceMap: true,
importLoaders: 1,
localIdentName: '[name]_[local]_[hash:base64:5]'
}
},
// 'postcss-loader'
]
},
{
test: /\.scss$/,
use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
},
{
test: /\.css$/,
exclude: resolve(__dirname, 'node_modules', 'react-toolbox'),
use: ['style-loader', 'css-loader']
},
{
test: /\.(jpe?g|svg|png|gif)$/,
use: ['file-loader']
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: ['file-loader']
}
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new MiniCssExtractPlugin({
filename: 'style.css',
}),
]
};
Есть идеи ?
При таком подходе возникают две проблемы. Если я хочу использовать такой плагин, как html-webpack-plugin, файл index.html больше не заполняется <link href = "/bundle.css" rel = "stylesheet">. Во-вторых, нормальное поведение MiniCssExtractPlugin не должно заключаться в создании файла style.css, как я уточнил в конструкторе?
Нет, поскольку у вас есть асинхронные фрагменты, он создаст style.css для каждого стиля, который будет удален из этих асинхронных фрагментов.
Уверяю вас, что если вы используете html-webpack-plugin, он будет работать. Он просто не добавлен туда, потому что эти css пришли не из одной из точек входа. Вот почему он не вставляется прямо в html. У меня есть аналогичный проект, и он отлично работает.
Хорошо, я понимаю, но дело в том, что я хочу сделать SSR в ближайшем будущем, не следует ли мне также вставлять CSS, и он будет работать?
Если они не отправляются из точки входа, они будут загружаться динамически веб-пакетом после запроса этих фрагментов.
Похоже на волшебство, но все равно попробую!
Кажется, вы сразу после поиска в файле bundle.js я нашел этот bundle.js 793:/******/ var href = "" + chunkId + ".style.css";
видеть?? :) мощь разделения кода !!!
я отправлю это как ответ на все вопросы, которые вы задали
Что-то у меня сломано. У меня в папке dist есть 0.style.css, но он никогда не загружается, когда компоненты загружаются асинхронно.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Взгляните на этот фрагмент кода из документации
module: {
rules: [
{
test: /\.(sa|sc|c)ss$/,
use: [
devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'sass-loader',
],
}
]
}
если вы внимательно посмотрите, то увидите, что он использует style-loader в режиме разработки и MiniCssExtractPlugin.loader для производства. Поэтому в процессе производства он сгенерирует еще один файл для css.
Что вам нужно сделать, так это:
В вашем файле package.json в разделе сценария вам нужно передать переменную env devMode следующим образом
"scripts": {
"webpack": "webpack",
"start": "npm run webpack -- --env.mode=development"
}
Тогда в вашем файле webpack.config.js вам нужно сделать это
module.exports = (env) => {
const devMode = env.mode === 'development'
return {
mode: env.mode, // will be development
devtool: ...,
entry: { ... },
output: { ... },
module: {
rules: [
{
test: /\.scss$/,
use: [devMode ? 'style-loader' : MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
}
]
}
}
}
Это должно быть нормально, надеюсь, это поможет.
Во-первых, спасибо за быстрый ответ! Я тоже видел это раньше в документации, проблема в том, что даже если я пытаюсь сделать это с style-loader в режиме разработки, файлы scss больше не выводятся ни в одном файле .css ..
Вы пробовали объединить свои правила для css, возможно, в этом проблема, прямо сейчас у вас их пара
Я не могу их объединить, потому что я использую определенную конфигурацию с include / excluse для библиотеки react-toolbox .. Я все равно попробую :)
There is two problems coming with this way. If i wanna use a plugin like html-webpack-plugin the index.html file is not filled with the anymore. Secondly the normal behavior of MiniCssExtractPlugin shouldn't be to create a file style.css like i precised in the constructor ?
Нет, поскольку у вас есть асинхронные фрагменты, он создаст style.css для каждого стиля, который будет удален из этих асинхронных фрагментов.
Уверяю вас, что если вы используете html-webpack-plugin, он будет работать. Он просто не добавлен туда, потому что эти css пришли не из одной из точек входа. Вот почему он не вставляется прямо в html. У меня есть аналогичный проект, и он отлично работает.
Если они не исходят из точки входа, они будут загружаться динамически веб-пакетом после запроса этих фрагментов.
Большие файлы вредит пользователям. Разделение кода - всегда ответ на все вопросы !!
Кажется, это правильный ответ, я пометил его как решение, пока все тестирую!
Это расщепление кода, почему вас это беспокоит? Помогает ... большой размер файла вредит пользователю