A webpack loader for svelte
npm install svelte-loader> Undecided yet what bundler to use? We suggest using SvelteKit, or Vite with vite-plugin-svelte.
npm install --save svelte svelte-loader
`
Usage
Configure inside your webpack.config.js:
`javascript
...
resolve: {
// see below for an explanation
alias: {
svelte: path.resolve('node_modules', 'svelte/src/runtime') // Svelte 3: path.resolve('node_modules', 'svelte')
},
extensions: ['.mjs', '.js', '.svelte'],
mainFields: ['svelte', 'browser', '...'],
conditionNames: ['svelte', 'browser', '...'],
},
module: {
rules: [
...
// The following two loader entries are only needed if you use Svelte 5+ with TypeScript.
// Also make sure your tsconfig.json includes "target": "ESNext" in order to not downlevel syntax
{
test: /\.svelte\.ts$/,
use: [ "svelte-loader", "ts-loader"],
},
// This is the config for other .ts files - the regex makes sure to not process .svelte.ts files twice
{
test: /(? loader: "ts-loader",
},
{
// Svelte 5+:
test: /\.(svelte|svelte\.js)$/,
// Svelte 3 or 4:
// test: /\.svelte$/,
// In case you write Svelte in HTML (not recommended since Svelte 3):
// test: /\.(html|svelte)$/,
use: 'svelte-loader'
},
{
// required to prevent errors from Svelte on Webpack 5+, omit on Webpack 4
test: /node_modules\/svelte\/.*\.mjs$/,
resolve: {
fullySpecified: false
}
}
...
]
}
...
`
Check out the example project.
$3
The resolve.alias option is used to make sure that only one copy of the Svelte runtime is bundled in the app, even if you are npm linking in dependencies with their own copy of the svelte package. Having multiple copies of the internal scheduler in an app, besides being inefficient, can also cause various problems.
$3
Webpack's resolve.mainFields option determines which fields in package.json are used to resolve identifiers. If you're using Svelte components installed from npm, you should specify this option so that your app can use the original component source code, rather than consuming the already-compiled version (which is less efficient).
$3
Webpack's resolve.conditionNames option determines which fields in the exports in package.json are used to resolve identifiers. If you're using Svelte components installed from npm, you should specify this option so that your app can use the original component source code, rather than consuming the already-compiled version (which is less efficient).
$3
If your Svelte components contain