Skip to content

Instantly share code, notes, and snippets.

@rob-balfre
Last active October 13, 2020 08:49
Show Gist options
  • Save rob-balfre/a4cbfeeba8cb670961eb90b474d74809 to your computer and use it in GitHub Desktop.
Save rob-balfre/a4cbfeeba8cb670961eb90b474d74809 to your computer and use it in GitHub Desktop.
Svelte webpack IE11
const presets = [
[
'@babel/preset-env',
{
targets: ['last 2 versions', 'ie >= 11'],
}
]
];
const plugins = [
'@babel/plugin-proposal-object-rest-spread',
];
module.exports = { presets, plugins };
<!DOCTYPE html>
<head lang="en"></head>
<body>
<!-- ... -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.4.4/polyfill.min.js"
integrity="sha256-lu1gm0Fb5u5n6tuNLefOZNE96ckovOjhNzvsl+Iz50w=" crossorigin="anonymous"></script>
<script>if (this.customElements) try { customElements.define('built-in', document.createElement('p').constructor, { 'extends': 'p' }) } catch (a) { document.write('<script src="https://unpkg.com/@ungap/[email protected]/min.js" crossorigin="anonymous" ><' + '/script>') } else document.write('<script src="https://unpkg.com/[email protected]/build/document-register-element.js" crossorigin="anonymous" ><' + '/script>');</script>
</body>
</html>
const webpack = require('webpack');
const path = require('path');
module.exports = {
watch: true,
entry: {
app: [
'./index.js'
],
},
resolve: {
extensions: ['.wasm', '.mjs', '.js', '.html', '.json', '.svelte'],
alias: {
svelte: path.resolve('node_modules', 'svelte')
},
mainFields: ['svelte', 'browser', 'module', 'main']
},
output: {
path: path.join(__dirname, '../build/dev'),
filename: 'svelte.[name].js',
chunkFilename: '[name].[id].js'
},
module: {
rules: [
{
test: /\.m?js$/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.svelte$/,
use: [
{
loader: 'babel-loader',
},
{
loader: 'svelte-loader',
options: {
preprocess: require('svelte-preprocess')({
postcss: true
}),
emitCss: true,
accessors: true,
dev: true
},
}
]
},
{
test: /\.jpg|png|gif|svg$/,
loader: 'file-loader',
options: {
name: '[name].[ext]',
useRelativePath: true
}
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
},
mode: 'development',
devtool: 'eval-source-map',
devServer: {
contentBase: path.join(__dirname, '/pta'),
compress: false,
port: 6060,
historyApiFallback: true
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment