Svelte + Sass + Webpack

Svelte の公式ではビルドする時は rollup 使ってるっぽいのだけど、
Webpack を使ってビルドしてみる。

今回は Webpack の設定だけの記事なので、
他ほとんど割愛。

ファイル構成

node_modules/
package.json
public/
  ├ css/
  ├ index.html
  └ js/
sass/
  └ style.scss
src/
  └ main.js
webpack.config.js

インストール

フロントで使うパッケージは割愛。
今回はビルドで使うものだけ。

• svelte-preprocess - svelte ファイル内で sass を書けるようになる。

$ npm install --save-dev css-loader mini-css-extract-plugin node-sass sass-loader style-loader svelte svelte-loader svelte-preprocess webpack webpack-cli 

サンプルコード

node_modules/

割愛

package.json

割愛

webpack.config.js

public/js と public/css にそれぞれ
bundle.js と bundle.css をビルドする。

const webpack = require('webpack');
const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const mode = process.env.NODE_ENV || 'development';
const prod = mode === 'production';

module.exports = {
	entry: './src/main.js',
	resolve: {
		alias: {
			svelte: path.dirname(require.resolve('svelte/package.json'))
		},
		extensions: ['.mjs', '.js', '.svelte'],
		mainFields: ['svelte', 'browser', 'module', 'main']
	},
	output: {
		path: path.resolve(__dirname, 'public'),
		filename: 'js/bundle.js',
	},
	module: {
		rules: [
			{
				test: /\.svelte$/,
				use: {
					loader: 'svelte-loader',
					options: {
						preprocess: require('svelte-preprocess')({
							scss: true,
						}),
						compilerOptions: {
							dev: !prod,
						},
						emitCss: prod,
						hotReload: !prod,
					},
				},
			},
			{
				test: /\.scss$/i,
				exclude: /node_modules/,
				use: [
					MiniCssExtractPlugin.loader,
					{
						loader: 'css-loader',
						options: {
							url: false,
						},
					},
					{
						loader: 'sass-loader',
						options: {},
					},
				],
			},
		],
	},
	plugins: [
		new webpack.IgnorePlugin({
			resourceRegExp: /^\.\/locale$/,
			contextRegExp: /moment$/,
		}),
		new MiniCssExtractPlugin({
			filename: 'css/bundle.css',
		}),
	],
}

public/index.html

割愛

sass/style.scss

割愛

src/main.js

import style from './../sass/style.scss'

省略
.
.
.