Webpack + Svelte4 + Babel で環境構築

環境

nodebrew

• node v16.0.0
• npm v7.10.0

package.json

パッケージだけ抜粋

"devDependencies": {
    "@babel/plugin-transform-private-methods": "^7.24.7",
    "@babel/preset-env": "^7.24.7",
    "babel-loader": "^9.1.3",
    "css-loader": "^7.1.2",
    "json-loader": "^0.5.7",
    "mini-css-extract-plugin": "^1.4.1",
    "node-sass": "^9.0.0",
    "sass": "^1.77.7",
    "sass-loader": "^14.2.1",
    "style-loader": "^4.0.0",
    "svelte": "^4.2.18",
    "svelte-loader": "^3.2.3",
    "svelte-preprocess": "^6.0.2",
    "webpack": "^5.92.1",
    "webpack-cli": "^5.1.4"
  },
  "dependencies": {
    "@holiday-jp/holiday_jp": "^2.4.0",
    "axios": "^1.7.2",
    "clipboard-polyfill": "^4.1.0",
    "comma-number": "^2.1.0",
    "dayjs": "^1.11.11",
    "js-cookie": "^3.0.5",
    "lodash.foreach": "^4.5.0",
    "marked": "^13.0.2",
    "moment": "^2.29.1",
    "qrious": "^4.0.2"
}

Webpack

下記参考

• webpack5 をほぼチュートリアル通りに進める その1（jsファイルのみのビルド）

Svelte

下記参考

• Svelte + Sass + Webpack

babel

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

$ npm install babel-loader --save-dev
$ npm install @babel/preset-env --save-dev
$ npm install @babel/plugin-transform-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-transform-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.resolve('node_modules', 'svelte/src/runtime'),
			'js-cookie': path.resolve('node_modules', 'js-cookie'),
			'clipboard-polyfill': path.resolve('node_modules', 'clipboard-polyfill'),
		},
		conditionNames: ['svelte'],
		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-transform-private-methods'],
					}
				}],
			},
			{
				test: /\.json$/,
				use: [{
					loader: 'json-loader',
				}],
				type: 'javascript/auto',
			},
			{
				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',
		}),
	],
}