title: Webpack config for svelte/sapper with typescript and scss support
body: <p>i just cant wrap my head around it, no matter how hard i try to find any help on discord server or official docs theres nothing about it.</p>
  
  <p>for example here is my react webpack config:</p>
  
  <pre><code>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'],
      },
  };
  </code></pre>
  
  <p>i had absolutely no trouble configuring it myself.
  Any help how to setup svelte sapper webpack config for typescript and scss support?</p>
  
  <p>Or maybe someone has rollup config?</p>