Skip to content

Instantly share code, notes, and snippets.

@damusix
Last active May 3, 2019 06:32
Show Gist options
  • Save damusix/e3eae7fb46f0e1886c63ac80e5a17720 to your computer and use it in GitHub Desktop.
Save damusix/e3eae7fb46f0e1886c63ac80e5a17720 to your computer and use it in GitHub Desktop.
Riot 4 webpack config. Babel polyfill for axios support.
<html>
<head>
<meta charset="UTF-8">
<title>Riot 4!!!</title>
</head>
<body>
<noscript>
<h1>This site is a simple single page app that requires javascript.</h1>
</noscript>
<app id="root"></app>
<script src="/public/app.js" charset="utf-8"></script>
</body>
</html>
{
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --inline --watch --hot --colors -d --port 3000"
},
"dependencies": {
"@babel/core": "^7.4.4",
"@babel/polyfill": "^7.4.4",
"@babel/preset-env": "^7.4.4",
"@riotjs/hot-reload": "^4.0.0-beta.1",
"@riotjs/webpack-loader": "^4.0.0",
"axios": "^0.18.0",
"babel-loader": "^8.0.5",
"riot": "^4.0.0-rc.6",
"webpack": "^4.30.0",
"webpack-cli": "^3.3.1",
"webpack-dev-server": "^3.3.1"
}
}
import * as riot from 'riot';
import App from './app.riot';
const mountApp = riot.component(App);
const app = mountApp(document.getElementById('root'), { ...props });
const path = require('path');
module.exports = {
entry: ['@babel/polyfill', './src/index.js'],
output: {
path: path.resolve(__dirname, 'public'),
publicPath: '/public/',
filename: 'app.js'
},
module: {
rules: [
{
test: /\.riot$/,
exclude: /node_modules/,
use: [{
loader: '@riotjs/webpack-loader',
options: {
hot: false, // set it to true if you are using hmr
// add here all the other @riotjs/compiler options riot.js.org/compiler
// template: 'pug' for example
}
}]
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment