Конфигурация Webpack для svelte/sapper с поддержкой машинописи и scss

Question

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

например, вот мой ответный пакет webpack:

const env = process.env.NODE_ENV || 'production';
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const VersionFile = require('webpack-version-file');
const webpack = require('webpack');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

module.exports = {
    entry: {
        main: path.join(__dirname, 'src', 'index'),
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        // filename: 'assets/js/[name].[chunkhash].js',
        filename: 'assets/js/[name].js',
        publicPath: '/',
    },
    module: {
        rules: [
            {
                test: /\.(jsx|tsx|js|ts)$/,
                exclude: [/node_modules/],
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            '@babel/preset-env',
                            '@babel/preset-react',
                            '@babel/preset-typescript',
                        ],
                    },
                },
                include: path.join(__dirname, 'src'),
            },
            {
                test: /\.js$/,
                use: ['source-map-loader'],
                enforce: 'pre',
            },
            {
                test: /\.(scss|sass|css)$/i,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
            },
            {
                type: 'javascript/auto',
                test: /\.json$/,
                use: 'file-loader?name=assets/i18n/locales/[name].[ext]',
            },
            {
                test: /\.(eot?.+|ttf?.+|otf?.+|woff?.+|woff2?.+)$/,
                use: 'file-loader?name=assets/fonts/[name]-[hash].[ext]',
            },
            {
                test: /\.(jpe?g|png|gif|svg|ico)$/i,
                use: 'file-loader?name=assets/img/[name]-[hash].[ext]',
                include: path.join(__dirname, 'src'),
            },
        ],
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css',
            chunkFilename: '[id].css',
        }),
        new ForkTsCheckerWebpackPlugin(),
        new HtmlWebpackPlugin({
            // hash: true,
            template: './src/index.html',
            filename: 'index.html',
        }),
        new CleanWebpackPlugin(),
        new VersionFile({
            output: './dist/version.txt',
            package: './package.json',
        }),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify(env),
        }),
        // new CopyWebpackPlugin([
        //     {
        //         from: path.join(__dirname, 'src/locales'),
        //         to: path.join(__dirname, 'dist/assets/locales'),
        //     },
        // ]),
    ],
    devtool: 'source-map',
    devServer: {
        contentBase: [path.resolve(__dirname, 'dist')],
        historyApiFallback: {
            disableDotRule: true,
        },
        host: '0.0.0.0',
        useLocalIp: true,
    },
    resolve: {
        alias: {
            pages: path.resolve(__dirname, 'src/pages'),
            components: path.resolve(__dirname, 'src/components'),
            config: path.resolve(__dirname, 'src/config'),
            services: path.resolve(__dirname, 'src/services'),
            store: path.resolve(__dirname, 'src/store'),
            utils: path.resolve(__dirname, 'src/utils'),
        },
        extensions: ['.ts', '.tsx', '.js', '.jsx'],
    },
};

У меня не было никаких проблем с настройкой. Любая помощь, как настроить конфиг svelte sapper webpack для поддержки машинописи и scss?

Или, может быть, у кого-то есть конфиг накопления?

Answer 1

Есть способ настроить его с помощью svelte.preprocess.

В настоящее время я знаю только, как это сделать с помощью плагина ( svelte-preprocess kaissermann), что, наверное, не идеально, ха-ха. Вот интересный подкаст на Youtube (28:25 - 29:57) Рича Харриса, рассказывающий об этом.

Если вам нравится подход плагинов, вот минимальный репозиторий sapper, который я сделал настроенным для использования SASS, TS и Autoprefixer с использованием Rollup. И аналог для Webpack

PS - Убедитесь, что теги script и style имеют правильные lang атрибут

<script lang="typescript">
<style lang="scss">

Answer 2

Вы можете попробовать использовать следующий шаблон:

https://github.com/Zimtir/SENT-template

Sapper.js + Node.js + Express.js + Typescript