Webpack mini-css-extract-plugin не создает CSS-файлы при сборке - PullRequest
Новая
       9

Webpack mini-css-extract-plugin не создает CSS-файлы при сборке

0 голосов
/ 03 февраля 2019

Я пытаюсь настроить mini-css-extract-plugin для создания одного или нескольких фрагментов CSS-файлов из SCSS после сборки, но, как мне кажется, я не очень хорошо знаком с веб-пакетом, и у меня что-то не получается.

Использование "веб-пакета"":" ^ 4.29.0 "," mini-css-extract-plugin ":" ^ 0.5.0 "мне удалось создать файлы JS, где они должны были быть файлами CSS. 

const webpack = require('webpack')

const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

const isProd = (process.env.NODE_ENV === 'production')

const port = 3000,
    host = 'localhost'

const styles = [
    { loader: isProd? MiniCssExtractPlugin.loader : 'style-loader' },
    {
        loader: 'css-loader',
        options: {
            sourceMap: !isProd,
            modules: true,
        }
    },
    { loader: 'postcss-loader' },
    {
        loader: 'sass-loader',
        options: {
            sourceMap: !isProd,
        }
    }]

module.exports = {
    mode: isProd? 'production': 'development',
    entry: ['@babel/polyfill', './src/index.js'],
    module: {
        rules: [
            {
                test: /\.(sa|sc|c)ss$/,
                exclude: /node_modules/,
                use: styles
            },
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            },
            {
                test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
                exclude: /node_modules/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: 'content/fonts/'
                    }
                }]
            }
        ]
    },
    resolve: {
        extensions: ['.scss', '.js', '.jsx']
    },
    output: {
        path: __dirname + '/dist',
        publicPath: '',
        filename: 'bundle.js'
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new CopyWebpackPlugin([
            { from:'src/content/images', to: 'content/images' },
        ]),
        new HtmlWebpackPlugin({
            template: './src/index.html',
            inject: 'body',
        }),
        new MiniCssExtractPlugin({
            chunkFilename: '[name].css',
            filename: 'styles.css'
        })
    ],
    optimization: {
        splitChunks: {
            chunks: 'all',
            cacheGroups: {
                styles: {
                    name: 'styles',
                    test: /\.(css|sass|scss)$/,
                    chunks: 'all',
                    enforce: true,
                    minChunks: 1,
                    reuseExistingChunk: true,
                }
            }
        }
    },
    devtool: 'source-map',
    devServer: {
        contentBase: './dist',
        hot: true,
        host: host,
        port: port,
        historyApiFallback: true,
        compress: true,
    }
}

Я хочу иметь возможность создавать большой отдельный файл CSS или несколько фрагментов CSS и файлов.

1 Ответ

0 голосов
/ 03 февраля 2019

Проблема в том, что isProd всегда ложно, поэтому webpack создает ваш блок стилей в виде файла js (styles.bundle.js).Установите isProd в значение true и попробуйте.Он должен работать.На самом деле я попробовал это на своей машине, и это сработало.

const isProd = true // just for debugging purpose. (process.env.NODE_ENV === 'production')

И еще одна вещь, я рекомендую не использовать Sass и PostCss вместе.Я думаю, что это стоит вашего проекта с большей сложностью.Потому что я не думаю, что вам понадобится Sass или любой другой препроцессор с таким инструментом, как PostCSS.Но если вы настаиваете на этом, PostCSS имеет хороший синтаксический анализатор для файлов sass, так что ваша конфигурация webpack будет, по крайней мере, более читабельной.Удачи!

...