Webpack + Svelte + Babel で環境構築

最終更新日:

Webpack

下記参考

Svelte

下記参考

babel

preset と plugin をそれぞれインストールして使ってみる。

$ npm install babel-loader --save-dev
$ npm install @babel/preset-env --save-dev
$ npm install @babel/plugin-proposal-private-methods --save-dev

webpack.config.js

関係あるとこのみ抜粋

module.exports = {
	...
	module: {
		rules: [
			{
				test: /\.js/,
				use: [{
					loader: 'babel-loader',
					options: {
						presets: ['@babel/preset-env'],
						plugins: ['@babel/plugin-proposal-private-methods']
					}
				}],
			},
		],
	},
	...
}

webpack.config.js 全コード

雑にコピペ。
この記事に関係ない設定とか諸々あるので注意。

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: './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: /\.js/,
				use: [{
					loader: 'babel-loader',
					options: {
						// presets: ['@babel/preset-env'],
						plugins: ['@babel/plugin-proposal-private-methods']
					}
				}],
			},
			{
				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',
		}),
	],
}