svelte - 具有 typescript 和 scss 支持的 svelte/sapper 的 Webpack 配置

Question

无论我多么努力地在不和谐服务器或官方文档上找到任何帮助，我都无法理解它。

例如，这是我的 react 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'],
    },
};

我自己配置​​它绝对没有问题。
任何帮助如何为 typescript 和 scss 支持设置 svelte sapper webpack 配置？

或者也许有人有汇总配置？

Answer 1

有一种方法可以使用 svelte.preprocess 进行设置.

我目前只知道如何使用插件来实现(kaissermann 的 svelte-preprocess )，这并不理想，哈哈。这是一个有趣的Youtube podcast (28:25 - 29:57)里奇哈里斯谈论它。

如果您对插件方法很满意，这里是我使用 Rollup 配置为使用 SASS、TS 和 Autoprefixer 的最小工兵存储库.相当于 Webpack

P.S - 确保脚本和样式标签正确 lang属性

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